安裝ESLint
安裝Prettier - Code formatter
安裝Vetur
配置文件如下 vscode => 首選項 => setting.json
{ // tab 大小為2個空格 "editor.tabSize": 2, // 100 列后換行 "editor.wordWrapColumn": 100, // 保存時格式化 "editor.formatOnSave": true, // 開啟 vscode 文件路徑導航 "breadcrumbs.enabled": true, // prettier 設置語句末尾不加分號 "prettier.semi": false, // prettier 設置強制單引號 "prettier.singleQuote": true, // 選擇 vue 文件中 template 的格式化工具 "vetur.format.defaultFormatter.html": "prettyhtml", // 顯示 markdown 中英文切換時產生的特殊字符 "editor.renderControlCharacters": true, // 設置 eslint 保存時自動修復 "eslint.autoFixOnSave": true, // eslint 檢測文件類型 "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ], "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "vetur.format.defaultFormatter.js": "vscode-typescript", // vetur 的自定義設置 "vetur.format.defaultFormatterOptions": { "prettier": { "singleQuote": true, "semi": false } }, "[vue]": { "editor.defaultFormatter": "octref.vetur" } }
eslint常用配置如下
module.exports = { // 環境定義了預定義的全局變量。 env: { //環境定義了預定義的全局變量。更多在官網查看 browser: true, node: true, commonjs: true, amd: true, es6: true, mocha: true }, // JavaScript 語言選項 parserOptions: { // ECMAScript 版本 ecmaVersion: 6, sourceType: 'script', //module // 想使用的額外的語言特性: ecmaFeatures: { // 允許在全局作用域下使用 return 語句 globalReturn: true, // impliedStric impliedStrict: true, // 啟用 JSX jsx: true } }, /** * "off" 或 0 - 關閉規則 * "warn" 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程序退出), * "error" 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出) */ rules: { //////////////// // 可能的錯誤 // //////////////// // 禁止條件表達式中出現賦值操作符 'no-cond-assign': 2, // 禁用 console 'no-console': 0, // 禁止在條件中使用常量表達式 // if (false) { // doSomethingUnfinished(); // } //cuowu 'no-constant-condition': 2, // 禁止在正則表達式中使用控制字符 ：new RegExp("\x1f") 'no-control-regex': 2, // 數組和對象鍵值對最后一個逗號， never參數：不能帶末尾的逗號, always參數：必須帶末尾的逗號， // always-multiline：多行模式必須帶逗號，單行模式不能帶逗號 'comma-dangle': [1, 'always-multiline'], // 禁用 debugger 'no-debugger': 2, // 禁止 function 定義中出現重名參數 'no-dupe-args': 2, // 禁止對象字面量中出現重復的 key 'no-dupe-keys': 2, // 禁止重復的 case 標簽 'no-duplicate-case': 2, // 禁止空語句塊 'no-empty': 2, // 禁止在正則表達式中使用空字符集 (/^abc[]/) 'no-empty-character-class': 2, // 禁止對 catch 子句的參數重新賦值 'no-ex-assign': 2, // 禁止不必要的布爾轉換 'no-extra-boolean-cast': 2, // 禁止不必要的括號 //(a * b) + c;//報錯 'no-extra-parens': 0, // 禁止不必要的分號 'no-extra-semi': 2, // 禁止對 function 聲明重新賦值 'no-func-assign': 2, // 禁止在嵌套的塊中出現 function 或 var 聲明 'no-inner-declarations': [2, 'functions'], // 禁止 RegExp 構造函數中無效的正則表達式字符串 'no-invalid-regexp': 2, // 禁止在字符串和注釋之外不規則的空白 'no-irregular-whitespace': 2, // 禁止在 in 表達式中出現否定的左操作數 'no-negated-in-lhs': 2, // 禁止把全局對象 (Math 和 JSON) 作為函數調用 錯誤：var math = Math(); 'no-obj-calls': 2, // 禁止直接使用 Object.prototypes 的內置屬性 'no-prototype-builtins': 0, // 禁止正則表達式字面量中出現多個空格 'no-regex-spaces': 2, // 禁用稀疏數組 'no-sparse-arrays': 2, // 禁止出現令人困惑的多行表達式 'no-unexpected-multiline': 2, // 禁止在return、throw、continue 和 break語句之后出現不可達代碼 /* function foo() { return true; console.log("done"); }//錯誤 */ 'no-unreachable': 2, // 要求使用 isNaN() 檢查 NaN 'use-isnan': 2, // 強制使用有效的 JSDoc 注釋 'valid-jsdoc': 1, // 強制 typeof 表達式與有效的字符串進行比較 // typeof foo === "undefimed" 錯誤 'valid-typeof': 2, ////////////// // 最佳實踐 // ////////////// // 定義對象的set存取器屬性時，強制定義get 'accessor-pairs': 2, // 強制數組方法的回調函數中有 return 語句 'array-callback-return': 0, // 強制把變量的使用限制在其定義的作用域范圍內 'block-scoped-var': 0, // 限制圈復雜度，也就是類似if else能連續接多少個 complexity: [2, 9], // 要求 return 語句要么總是指定返回的值，要么不指定 'consistent-return': 0, // 強制所有控制語句使用一致的括號風格 curly: [2, 'all'], // switch 語句強制 default 分支，也可添加 // no default 注釋取消此次警告 'default-case': 2, // 強制object.key 中 . 的位置，參數: // property，'.'號應與屬性在同一行 // object, '.' 號應與對象名在同一行 'dot-location': [2, 'property'], // 強制使用.號取屬性 // 參數： allowKeywords：true 使用保留字做屬性名時，只能使用.方式取屬性 // false 使用保留字做屬性名時, 只能使用[]方式取屬性 e.g [2, {"allowKeywords": false}] // allowPattern: 當屬性名匹配提供的正則表達式時，允許使用[]方式取值,否則只能用.號取值 e.g [2, {"allowPattern": "^[a-z]+(_[a-z]+)+$"}] 'dot-notation': [2, { allowKeywords: false }], // 使用 === 替代 == allow-null允許null和undefined== eqeqeq: [2, 'allow-null'], // 要求 for-in 循環中有一個 if 語句 'guard-for-in': 2, // 禁用 alert、confirm 和 prompt 'no-alert': 0, // 禁用 arguments.caller 或 arguments.callee 'no-caller': 2, // 不允許在 case 子句中使用詞法聲明 'no-case-declarations': 2, // 禁止除法操作符顯式的出現在正則表達式開始的位置 'no-div-regex': 2, // 禁止 if 語句中有 return 之后有 else 'no-else-return': 0, // 禁止出現空函數.如果一個函數包含了一條注釋，它將不會被認為有問題。 'no-empty-function': 2, // 禁止使用空解構模式no-empty-pattern 'no-empty-pattern': 2, // 禁止在沒有類型檢查操作符的情況下與 null 進行比較 'no-eq-null': 1, // 禁用 eval() 'no-eval': 2, // 禁止擴展原生類型 'no-extend-native': 2, // 禁止不必要的 .bind() 調用 'no-extra-bind': 2, // 禁用不必要的標簽 'no-extra-label:': 0, // 禁止 case 語句落空 'no-fallthrough': 2, // 禁止數字字面量中使用前導和末尾小數點 'no-floating-decimal': 2, // 禁止使用短符號進行類型轉換(!!fOO) 'no-implicit-coercion': 0, // 禁止在全局范圍內使用 var 和命名的 function 聲明 'no-implicit-globals': 1, // 禁止使用類似 eval() 的方法 'no-implied-eval': 2, // 禁止 this 關鍵字出現在類和類對象之外 'no-invalid-this': 0, // 禁用 __iterator__ 屬性 'no-iterator': 2, // 禁用標簽語句 'no-labels': 2, // 禁用不必要的嵌套塊 'no-lone-blocks': 2, // 禁止在循環中出現 function 聲明和表達式 'no-loop-func': 1, // 禁用魔術數字(3.14什么的用常量代替) 'no-magic-numbers': [1, { ignore: [0, -1, 1] }], // 禁止使用多個空格 'no-multi-spaces': 2, // 禁止使用多行字符串，在 JavaScript 中，可以在新行之前使用斜線創建多行字符串 'no-multi-str': 2, // 禁止對原生對象賦值 'no-native-reassign': 2, // 禁止在非賦值或條件語句中使用 new 操作符 'no-new': 2, // 禁止對 Function 對象使用 new 操作符 'no-new-func': 0, // 禁止對 String，Number 和 Boolean 使用 new 操作符 'no-new-wrappers': 2, // 禁用八進制字面量 'no-octal': 2, // 禁止在字符串中使用八進制轉義序列 'no-octal-escape': 2, // 不允許對 function 的參數進行重新賦值 'no-param-reassign': 0, // 禁用 __proto__ 屬性 'no-proto': 2, // 禁止使用 var 多次聲明同一變量 'no-redeclare': 2, // 禁用指定的通過 require 加載的模塊 'no-return-assign': 0, // 禁止使用 javascript: url 'no-script-url': 0, // 禁止自我賦值 'no-self-assign': 2, // 禁止自身比較 'no-self-compare': 2, // 禁用逗號操作符 'no-sequences': 2, // 禁止拋出非異常字面量 'no-throw-literal': 2, // 禁用一成不變的循環條件 'no-unmodified-loop-condition': 2, // 禁止出現未使用過的表達式 'no-unused-expressions': 0, // 禁用未使用過的標簽 'no-unused-labels': 2, // 禁止不必要的 .call() 和 .apply() 'no-useless-call': 2, // 禁止不必要的字符串字面量或模板字面量的連接 'no-useless-concat': 2, // 禁用不必要的轉義字符 'no-useless-escape': 0, // 禁用 void 操作符 'no-void': 0, // 禁止在注釋中使用特定的警告術語 'no-warning-comments': 0, // 禁用 with 語句 'no-with': 2, // 強制在parseInt()使用基數參數 radix: 2, // 要求所有的 var 聲明出現在它們所在的作用域頂部 'vars-on-top': 0, // 要求 IIFE 使用括號括起來 'wrap-iife': [2, 'any'], // 要求或禁止 “Yoda” 條件 yoda: [2, 'never'], // 要求或禁止使用嚴格模式指令 strict: 0, ////////////// // 變量聲明 // ////////////// // 要求或禁止 var 聲明中的初始化(初值) 'init-declarations': 0, // 不允許 catch 子句的參數與外層作用域中的變量同名 'no-catch-shadow': 0, // 禁止刪除變量 'no-delete-var': 2, // 不允許標簽與變量同名 'no-label-var': 2, // 禁用特定的全局變量 'no-restricted-globals': 0, // 禁止 var 聲明 與外層作用域的變量同名 'no-shadow': 0, // 禁止覆蓋受限制的標識符 'no-shadow-restricted-names': 2, // 禁用未聲明的變量，除非它們在 /*global */ 注釋中被提到 'no-undef': 2, // 禁止將變量初始化為 undefined 'no-undef-init': 2, // 禁止將 undefined 作為標識符 'no-undefined': 0, // 禁止出現未使用過的變量 'no-unused-vars': [2, { vars: 'all', args: 'none' }], // 不允許在變量定義之前使用它們 'no-use-before-define': 0, ////////////////////////// // Node.js and CommonJS // ////////////////////////// // require return statements after callbacks 'callback-return': 0, // 要求 require() 出現在頂層模塊作用域中 'global-require': 1, // 要求回調函數中有容錯處理 'handle-callback-err': [2, '^(err|error)$'], // 禁止混合常規 var 聲明和 require 調用 'no-mixed-requires': 0, // 禁止調用 require 時使用 new 操作符 'no-new-require': 2, // 禁止對 __dirname 和 __filename進行字符串連接 'no-path-concat': 0, // 禁用 process.env 'no-process-env': 0, // 禁用 process.exit() 'no-process-exit': 0, // 禁用同步方法 'no-sync': 0, ////////////// // 風格指南 // ////////////// // 指定數組的元素之間要以空格隔開(, 后面)， never參數：[ 之前和 ] 之后不能帶空格，always參數：[ 之前和 ] 之后必須帶空格 'array-bracket-spacing': [2, 'never'], // 禁止或強制在單行代碼塊中使用空格(禁用) 'block-spacing': [1, 'never'], //強制使用一致的縮進 第二個參數為 "tab" 時，會使用tab， // if while function 后面的{必須與if在同一行，java風格。 'brace-style': [2, '1tbs', { allowSingleLine: true }], // 雙峰駝命名格式 camelcase: 2, // 控制逗號前后的空格 'comma-spacing': [2, { before: false, after: true }], // 控制逗號在行尾出現還是在行首出現 (默認行尾) // http://eslint.org/docs/rules/comma-style 'comma-style': [2, 'last'], //"SwitchCase" (默認：0) 強制 switch 語句中的 case 子句的縮進水平 // 以方括號取對象屬性時，[ 后面和 ] 前面是否需要空格, 可選參數 never, always 'computed-property-spacing': [2, 'never'], // 用於指統一在回調函數中指向this的變量名，箭頭函數中的this已經可以指向外層調用者，應該沒卵用了 // e.g [0,"that"] 指定只能 var that = this. that不能指向其他任何值，this也不能賦值給that以外的其他值 'consistent-this': [1, 'that'], // 強制使用命名的 function 表達式 'func-names': 0, // 文件末尾強制換行 'eol-last': 2, indent: [2, 4, { SwitchCase: 1 }], // 強制在對象字面量的屬性中鍵和值之間使用一致的間距 'key-spacing': [2, { beforeColon: false, afterColon: true }], // 強制使用一致的換行風格 'linebreak-style': [1, 'unix'], // 要求在注釋周圍有空行 ( 要求在塊級注釋之前有一空行) 'lines-around-comment': [1, { beforeBlockComment: true }], // 強制一致地使用函數聲明或函數表達式，方法定義風格，參數： // declaration: 強制使用方法聲明的方式，function f(){} e.g [2, "declaration"] // expression：強制使用方法表達式的方式，var f = function() {} e.g [2, "expression"] // allowArrowFunctions: declaration風格中允許箭頭函數。 e.g [2, "declaration", { "allowArrowFunctions": true }] 'func-style': 0, // 強制回調函數最大嵌套深度 5層 'max-nested-callbacks': [1, 5], // 禁止使用指定的標識符 'id-blacklist': 0, // 強制標識符的最新和最大長度 'id-length': 0, // 要求標識符匹配一個指定的正則表達式 'id-match': 0, // 強制在 JSX 屬性中一致地使用雙引號或單引號 'jsx-quotes': 0, // 強制在關鍵字前后使用一致的空格 (前后腰需要) 'keyword-spacing': 2, // 強制一行的最大長度 'max-len': [1, 200], // 強制最大行數 'max-lines': 0, // 強制 function 定義中最多允許的參數數量 'max-params': [1, 7], // 強制 function 塊最多允許的的語句數量 'max-statements': [1, 200], // 強制每一行中所允許的最大語句數量 'max-statements-per-line': 0, // 要求構造函數首字母大寫 （要求調用 new 操作符時有首字母大小的函數，允許調用首字母大寫的函數時沒有 new 操作符。） 'new-cap': [2, { newIsCap: true, capIsNew: false }], // 要求調用無參構造函數時有圓括號 'new-parens': 2, // 要求或禁止 var 聲明語句后有一行空行 'newline-after-var': 0, // 禁止使用 Array 構造函數 'no-array-constructor': 2, // 禁用按位運算符 'no-bitwise': 0, // 要求 return 語句之前有一空行 'newline-before-return': 0, // 要求方法鏈中每個調用都有一個換行符 'newline-per-chained-call': 1, // 禁用 continue 語句 'no-continue': 0, // 禁止在代碼行后使用內聯注釋 'no-inline-comments': 0, // 禁止 if 作為唯一的語句出現在 else 語句中 'no-lonely-if': 0, // 禁止混合使用不同的操作符 'no-mixed-operators': 0, // 不允許空格和 tab 混合縮進 'no-mixed-spaces-and-tabs': 2, // 不允許多個空行 'no-multiple-empty-lines': [2, { max: 2 }], // 不允許否定的表達式 'no-negated-condition': 0, // 不允許使用嵌套的三元表達式 'no-nested-ternary': 0, // 禁止使用 Object 的構造函數 'no-new-object': 2, // 禁止使用一元操作符 ++ 和 -- 'no-plusplus': 0, // 禁止使用特定的語法 'no-restricted-syntax': 0, // 禁止 function 標識符和括號之間出現空格 'no-spaced-func': 2, // 不允許使用三元操作符 'no-ternary': 0, // 禁用行尾空格 'no-trailing-spaces': 2, // 禁止標識符中有懸空下划線_bar 'no-underscore-dangle': 0, // 禁止可以在有更簡單的可替代的表達式時使用三元操作符 'no-unneeded-ternary': 2, // 禁止屬性前有空白 'no-whitespace-before-property': 0, // 強制花括號內換行符的一致性 'object-curly-newline': 0, // 強制在花括號中使用一致的空格 'object-curly-spacing': 0, // 強制將對象的屬性放在不同的行上 'object-property-newline': 0, // 強制函數中的變量要么一起聲明要么分開聲明 'one-var': [2, { initialized: 'never' }], // 要求或禁止在 var 聲明周圍換行 'one-var-declaration-per-line': 0, // 要求或禁止在可能的情況下要求使用簡化的賦值操作符 'operator-assignment': 0, // 強制操作符使用一致的換行符 'operator-linebreak': [ 2, 'after', { overrides: { '?': 'before', ':': 'before' } } ], // 要求或禁止塊內填充 'padded-blocks': 0, // 要求對象字面量屬性名稱用引號括起來 'quote-props': 0, // 強制使用一致的反勾號、雙引號或單引號 quotes: [2, 'single', 'avoid-escape'], // 要求使用 JSDoc 注釋 'require-jsdoc': 1, // 要求或禁止使用分號而不是 ASI（這個才是控制行尾部分號的，） semi: [2, 'always'], // 強制分號之前和之后使用一致的空格 'semi-spacing': 0, // 要求同一個聲明塊中的變量按順序排列 'sort-vars': 0, // 強制在塊之前使用一致的空格 'space-before-blocks': [2, 'always'], // 強制在 function的左括號之前使用一致的空格 'space-before-function-paren': [2, 'always'], // 強制在圓括號內使用一致的空格 'space-in-parens': [2, 'never'], // 要求操作符周圍有空格 'space-infix-ops': 2, // 強制在一元操作符前后使用一致的空格 'space-unary-ops': [2, { words: true, nonwords: false }], // 強制在注釋中 // 或 /* 使用一致的空格 'spaced-comment': [ 2, 'always', { markers: [ 'global', 'globals', 'eslint', 'eslint-disable', '*package', '!' ] } ], // 要求或禁止 Unicode BOM 'unicode-bom': 0, // 要求正則表達式被括號括起來 'wrap-regex': 0, ////////////// // ES6.相關 // ////////////// // 要求箭頭函數體使用大括號 'arrow-body-style': 2, // 要求箭頭函數的參數使用圓括號 'arrow-parens': 2, 'arrow-spacing': [2, { before: true, after: true }], // 強制在子類構造函數中用super()調用父類構造函數，TypeScrip的編譯器也會提示 'constructor-super': 0, // 強制 generator 函數中 * 號周圍使用一致的空格 'generator-star-spacing': [2, { before: true, after: true }], // 禁止修改類聲明的變量 'no-class-assign': 2, // 不允許箭頭功能，在那里他們可以混淆的比較 'no-confusing-arrow': 0, // 禁止修改 const 聲明的變量 'no-const-assign': 2, // 禁止類成員中出現重復的名稱 'no-dupe-class-members': 2, // 不允許復制模塊的進口 'no-duplicate-imports': 0, // 禁止 Symbol 的構造函數 'no-new-symbol': 2, // 允許指定模塊加載時的進口 'no-restricted-imports': 0, // 禁止在構造函數中，在調用 super() 之前使用 this 或 super 'no-this-before-super': 2, // 禁止不必要的計算性能鍵對象的文字 'no-useless-computed-key': 0, // 要求使用 let 或 const 而不是 var 'no-var': 0, // 要求或禁止對象字面量中方法和屬性使用簡寫語法 'object-shorthand': 0, // 要求使用箭頭函數作為回調 'prefer-arrow-callback': 0, // 要求使用 const 聲明那些聲明后不再被修改的變量 'prefer-const': 0, // 要求在合適的地方使用 Reflect 方法 'prefer-reflect': 0, // 要求使用擴展運算符而非 .apply() 'prefer-spread': 0, // 要求使用模板字面量而非字符串連接 'prefer-template': 0, // Suggest using the rest parameters instead of arguments 'prefer-rest-params': 0, // 要求generator 函數內有 yield 'require-yield': 0, // enforce spacing between rest and spread operators and their expressions 'rest-spread-spacing': 0, // 強制模塊內的 import 排序 'sort-imports': 0, // 要求或禁止模板字符串中的嵌入表達式周圍空格的使用 'template-curly-spacing': 1, // 強制在 yield* 表達式中 * 周圍使用空格 'yield-star-spacing': 2 } }
其他插件選擇:
EditorConfig for VS Code（https://blog.csdn.net/Gabriel_wei/article/details/90286668）