當多人團隊協作時，ESLint 的規範可以讓大家的程式碼風格趨於一致，再藉由 Visual Studio Code 內的套件和CLI ( Command Line Interface ) 指令的協助下，可以達成自動排版的功效。讓你在撰寫時還是可以維持多數自己的風格，排版這檔事就交給程式自動處理吧。
步驟
1. 先用 Vue Cli 建立一個新專案，並在 Manually Select Features 中勾選 Linter / Formatter
2. 選擇 ESLint 和 Standard Config 即可 / 並選擇在 On Save 的時候就排版
3. 相關的 Babel, Eslint Config 檔，獨立拆出放在根目錄下 ( In dedicated config files )
4. 安裝 VS Code 上的 ESLint 套件，方便之後做整合 ( 為避免相關的套件衝突，請先行關閉其他相關功能套件 )
5. 關鍵檔案設定如下：
.eslintrc.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
module.exports = { root: true, env: { node: true }, extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/standard'], parserOptions: { parser: 'babel-eslint' }, rules: { indent: [2, 4], // 縮排規則，index[0] 的數字代表含意為 關閉(0), 警告(1), 錯誤(2) quotes: [2, 'single'], // 單引號, 雙引號 semi: [2, 'never'], // 句尾是否加上 ";" 'no-use-before-define': [2, 'nofunc'], //變數是否一定要宣告賦值 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 是否留下 console.log 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 是否留下 debugger 'comma-spacing': [2, { // 關於 , 的規則，前後是否有空格 before: false, after: true }], 'key-spacing': [1, { // 關於 key 的 ":" 前後是否有空格 beforeColon: false, afterColon: true }], 'import/first': [0], // 雖說 import 都會先 Hoisting，在這些行數中間可否插入其他的變數或是函式 'object-property-newline': [2, { // Object 的撰寫規則，詳請請查閱官方文件 allowAllPropertiesOnSameLine: false }], 'object-curly-newline': [1, { // Object 的撰寫規則，詳請請查閱官方文件 ObjectExpression: 'always', ImportDeclaration: 'always', ExportDeclaration: 'never' }], 'vue/html-indent': [1, 4, { // Vue 中的 html 的撰寫規則，詳請請查閱官方文件 attribute: 1, baseIndent: 1, closeBracket: 0, alignAttributesVertically: true, ignores: [] }], 'vue/html-closing-bracket-newline': [2, { // Vue 中的 html 的撰寫規則，詳請請查閱官方文件 singleline: 'never', multiline: 'always' }], 'vue/html-closing-bracket-spacing': [2, { // Vue 中的 html 的撰寫規則，詳請請查閱官方文件 selfClosingTag: 'always' }] } } |
settings.json ( VS Code)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "editor.formatOnSave": false, // if you use ESlint，this should be false "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, "eslint.alwaysShowStatus": true, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact", "vue", ], "vetur.validation.template": false, } |
package.json
|
1 2 3 4 5 6 7 |
{ "scripts":{ ... , "format": "vue-cli-service lint --fix", // 可用 npm run format 來自動校正，它會抓取 .eslintrc.js 的規則 ... } } |
由於 ESLint 的套件是抓取專案根目錄下的 .eslintrc.js 。若你的 .eslintrc.js 不在根目錄下，記得在專案根目錄下新增一個 .vscode 的資料夾，裡面新增一個 setting.json 的檔案。內容如下：
|
1 2 3 4 5 |
{ "eslint.workingDirectories": [ "./<你的 .eslintrc 所在位置>" ] } |
CSS 的排版需求可以解決嗎？
當然是可行的，僅需要搭配 Stylelint 工具即可。詳細說明請看這篇：[指南] Vue 結合 StyleLint 來統一你的 CSS 樣式
Github 原始碼
https://github.com/andy922200/vue-vuetify-eslint-babel-stylelint-integration
相關文章
1. eslint-plugin-vue Rules
2. Getting Started with ESLint
3. Vue.js – 使用 ESLint + Prettier 整理程式碼
4. [Vue] 整合 Vue style guide, eslint-plugin-vue 和 VSCode
