Vue.js | vscode vue排版
在多人開發的時常常大家寫Code的風格都不一樣,這時候可以透過輔助工具來統一每個人的風格,當然自己開發時也可以用,尤其是像我這種寫Code習慣很差的人XD,今天就來介紹如何使用ESLint與Prettier整理自己的程式碼~這邊我們使用VSCode開發,首先安裝ESLint與Prettier的插件ESLintESLint[1]是一個檢查CodingStyle的工具,如果寫法與設定不符則會跳出錯誤警告,比較常見的規範有Airbnb、Standard、Google,當然也可依照文件自訂規則PrettierPrettier[2]是程式碼格式化工具,VSCode預設可使用Alt+Shift+F格式化程式碼,而我們可以套用自...
在多人開發的時常常大家寫 Code 的風格都不一樣,這時候可以透過輔助工具來統一每個人的風格,當然自己開發時也可以用,尤其是像我這種寫 Code 習慣很差的人XD,今天就來介紹如何使用 ESLint 與 Prettier 整理自己的程式碼~
這邊我們使用 VSCode 開發,首先安裝 ESLint 與 Prettier 的插件
ESLintESLint[1] 是一個檢查 Coding Style 的工具,如果寫法與設定不符則會跳出錯誤警告,比較常見的規範有 Airbnb、Standard、Google,當然也可依照文件自訂規則
PrettierPrettier[2] 是程式碼格式化工具,VSCode 預設可使用 Alt + Shift + F 格式化程式碼,而我們可以套用自己的 Prettier 設定,並將其設定為存檔時自動格式化,這樣就會方便很多哦
專案使用 ESLint + PrettierESLint 與 Prettier 一起使用時有各自負責的部分,ESLint 負責訂定 Coding Style 與檢查,而 Prettier 則負責將 Code 格式化排整齊,以下介紹一下安裝方式
Vue CLI目前的 Vue CLI 有整合 ESLint + Prettier,因此選擇之後即安裝完成安裝完成後開啟根目錄的 .eslintrc.js 檔案,這時候可以看到裡面的設定如下
// .eslintrc.js module.exports = { // ... extends: [ "plugin:vue/essential", // 使用 essential 規範 "eslint:recommended", // 使用 ESLint 推薦規範 "@vue/prettier" //使用 prettier ], // ... };其中 plugin:vue/essential 是 eslint-plugin-vue[3] 的功能,他提供我們對 Vue 寫法的建議,順序由寬鬆到嚴謹有以下四種,可依喜好自行調整