vue項(xiàng)目中使用eslint+prettier規(guī)范與檢查代碼的方法

{
root: true, // 當(dāng)前配置為根配置，將不再從上級文件夾查找配置
parserOptions: {
 parser: 'babel-eslint', // 采用 babel-eslint 作為語法解析器
 sourceType: 'module',  // 指定來源的類型，有兩種script或module
 ecmaVersion: 6, //指定ECMAScript支持的版本，6為ES6
},
env: {
 browser: true, // 設(shè)置為所需檢查的代碼是在瀏覽器環(huán)境運(yùn)行的
 es6: true // 設(shè)置所需檢查代碼為 es6 語法書寫
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],// 擴(kuò)展使用 vue 檢查規(guī)則和eslint推薦規(guī)則
 rules: {
  'vue/attribute-hyphenation': 0, // 忽略屬性連字
  'vue/max-attributes-per-line':[2, { singleline: 10, multiline: { max: 1, allowFirstLine: false } }], // 每行最大屬性
  'vue/singleline-html-element-content-newline': 'off', // 單行html元素內(nèi)容在新的一行
  'vue/multiline-html-element-content-newline': 'off', // 多行html元素內(nèi)容在新的一行
  'vue/html-closing-bracket-newline': 'off', // html右括號在新的一行
  'vue/no-v-html': 'off', // 不使用v-html
  'vue/html-self-closing': 0, // 忽略html標(biāo)簽自閉合
  'accessor-pairs': 2, // 應(yīng)同時(shí)設(shè)置setter和getter
  'arrow-spacing': [2, { before: true, after: true }], // 箭頭間距
  'vue/require-default-prop': 0, // 不檢查默認(rèn)屬性
  'vue/require-prop-types': 0, // 不檢查默認(rèn)類型
  'block-spacing': [2, 'always'], // 塊間距
  'brace-style': [2, '1tbs', { allowSingleLine: true }], // 大括號樣式允許單行
  'camelcase': [2, { properties: 'always' }], //為屬性強(qiáng)制執(zhí)行駝峰命名
  'comma-dangle': [2, 'never'], // 逗號不使用懸掛
  'comma-spacing': [2, { before: false, after: true }], // 逗號間距
  'comma-style': [2, 'last'], //（默認(rèn)）與數(shù)組元素，對象屬性或變量聲明在同一行之后和同一行需要逗號
  'constructor-super': 2,
  'consistent-this': [2, 'that'], //強(qiáng)制this別名為that
  'curly': [2, 'multi-line'], // 當(dāng)一個(gè)塊只包含一條語句時(shí)，不允許省略花括號。
  'dot-location': [2, 'property'], //成員表達(dá)式中的點(diǎn)應(yīng)與屬性部分位于同一行
  'eol-last': 2, // 強(qiáng)制文件以換行符結(jié)束（LF）
  'eqeqeq': ['error', 'always', { null: 'ignore' }], // 強(qiáng)制使用全等
  'generator-star-spacing': [2, { before: true, after: true }], // 生成器中'*'兩側(cè)都要有間距
  'global-require': 1, // 所有調(diào)用require()都位于模塊的頂層
  'indent': [2, 2, { SwitchCase: 2 }], //縮進(jìn)風(fēng)格
  'key-spacing': [2, { beforeColon: false, afterColon: true }], // 強(qiáng)制在對象字面量屬性中的鍵和值之間保持一致的間距
  'keyword-spacing': [2, { before: true, after: true }], // 關(guān)鍵字如if/function等的間距
  'new-cap': [2, { newIsCap: true, capIsNew: false }],// 允許在沒有new操作符的情況下調(diào)用大寫啟動(dòng)的函數(shù);（默認(rèn)）要求new使用大寫啟動(dòng)函數(shù)調(diào)用所有操作符
  'new-parens': 2, // JavaScript通過new關(guān)鍵字調(diào)用函數(shù)時(shí)允許省略括號
  'no-array-constructor': 1, // 不允許使用Array構(gòu)造函數(shù)。除非要指定生成數(shù)組的長度
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 只有開發(fā)環(huán)境可以使用console
  'no-class-assign': 2, // 不允許修改類聲明的變量
  'no-const-assign': 2, // 不能修改使用const關(guān)鍵字聲明的變量
  'no-control-regex': 0, // 不允許正則表達(dá)式中的控制字符
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 只有開發(fā)環(huán)境可以使用debugger
  'no-delete-var': 2, // 不允許在變量上使用delete操作符
  'no-dupe-args': 2, // 不允許在函數(shù)聲明或表達(dá)式中使用重復(fù)的參數(shù)名稱
  'no-dupe-class-members': 2, // 不允許在類成員中使用重復(fù)的參數(shù)名稱
  'no-dupe-keys': 2, // 不允許在對象文字中使用重復(fù)鍵
  'no-duplicate-case': 2, // 不允許在switch語句的case子句中使用重復(fù)的測試表達(dá)式
  'no-empty-character-class': 2, // 不允許在正則表達(dá)式中使用空字符類
  'no-empty-pattern': 2, // 不允許空塊語句
  'no-eval': 2, // 不允許使用eval
  'no-ex-assign': 2, // 不允許在catch子句中重新分配例外
  'no-extend-native': 2, // 不允許直接修改內(nèi)建對象的原型
  'no-extra-boolean-cast': 2, // 禁止不必要的布爾轉(zhuǎn)換
  'no-extra-parens': [2, 'functions'], // 僅在函數(shù)表達(dá)式附近禁止不必要的括號
  'no-fallthrough': 2, //消除一個(gè)案件無意中掉到另一個(gè)案件
  'no-floating-decimal': 2, //消除浮點(diǎn)小數(shù)點(diǎn)，并在數(shù)值有小數(shù)點(diǎn)但在其之前或之后缺少數(shù)字時(shí)發(fā)出警告
  'no-func-assign': 2, // 允許重新分配function聲明
  'no-implied-eval': 2, // 消除隱含eval()
  'no-inner-declarations': [2, 'functions'], // 不允許function嵌套塊中的聲明
  'no-invalid-regexp': 2, //不允許RegExp構(gòu)造函數(shù)中的無效正則表達(dá)式字符串
  'no-irregular-whitespace': 2, //捕獲無效的空格
  'no-iterator': 2, //消除陰影變量聲明
  'no-label-var': 2, //禁止創(chuàng)建與范圍內(nèi)的變量共享名稱的標(biāo)簽
  'no-labels': [2, { allowLoop: false, allowSwitch: false }], // 消除 JavaScript 中使用帶標(biāo)簽的語句
  'no-lone-blocks': 2, //消除腳本頂層或其他塊中不必要的和可能混淆的塊
  'no-mixed-spaces-and-tabs': 2, // 不允許使用混合空格和制表符進(jìn)行縮進(jìn)
  'no-multi-spaces': 2, // 禁止在邏輯表達(dá)式，條件表達(dá)式，聲明，數(shù)組元素，對象屬性，序列和函數(shù)參數(shù)周圍使用多個(gè)空格
  'no-multi-str': 2, // 防止使用多行字符串
  'no-multiple-empty-lines': [2, { max: 1 }], // 最多一個(gè)空行
  'no-native-reassign': 2, // 不允許修改只讀全局變量
  'no-new-object': 2, // 不允許使用Object構(gòu)造函數(shù)
  'no-new-require': 2, // 消除new require表達(dá)的使用
  'no-new-symbol': 2, // 防止Symbol與new 同時(shí)使用的意外錯(cuò)誤
  'no-new-wrappers': 2, // 杜絕使用String，Number以及Boolean與new操作
  'no-obj-calls': 2, // 不允許調(diào)用Math，JSON和Reflect對象作為功能
  'no-octal': 2, // 不允許使用八進(jìn)制文字
  'no-octal-escape': 2, // 不允許字符串文字中的八進(jìn)制轉(zhuǎn)義序列
  'no-path-concat': 2, // 防止 Node.js 中的目錄路徑字符串連接無效
  'no-redeclare': 2, // 消除在同一范圍內(nèi)具有多個(gè)聲明的變量
  'no-regex-spaces': 2, // 在正則表達(dá)式文字中不允許有多個(gè)空格
  'no-return-assign': [2, 'except-parens'], // 消除return陳述中的任務(wù)，除非用括號括起來
  'no-self-assign': 2, // 消除自我分配
  'no-self-compare': 2, // 禁止比較變量與自身
  'no-sequences': 2, // 禁止使用逗號運(yùn)算符
  'no-sparse-arrays': 2, // 不允許稀疏數(shù)組文字
  'no-this-before-super': 2, // 在呼call前標(biāo)記this/super關(guān)鍵字super()
  'no-throw-literal': 2, // 不允許拋出不可能是Error對象的文字和其他表達(dá)式
  'no-trailing-spaces': 2, // 不允許在行尾添加尾隨空白
  'no-undef': 2, // 任何對未聲明的變量的引用都會(huì)導(dǎo)致錯(cuò)誤
  'no-undef-init': 2, // 消除初始化為undefined的變量聲明
  'no-underscore-dangle': 2, // 標(biāo)識符不能以_開頭或結(jié)尾
  'no-unexpected-multiline': 2, // 不允許混淆多行表達(dá)式
  'no-unmodified-loop-condition': 2, // 查找循環(huán)條件內(nèi)的引用，然后檢查這些引用的變量是否在循環(huán)中被修改
  'no-unneeded-ternary': [2, { defaultAssignment: false }], // 不允許將條件表達(dá)式作為默認(rèn)的分配模式
  'no-unreachable': 2, // 不允許可達(dá)代碼return，throw，continue，和break語句后面還有語句。
  'no-unsafe-finally': 2, // 不允許return，throw，break，和continue里面的語句finally塊
  'no-unused-vars': [2, { vars: 'all', args: 'after-used' }],
  // 消除未使用的變量，函數(shù)和函數(shù)的參數(shù)
  // vars: 'all' 檢查所有變量的使用情況，包括全局范圍內(nèi)的變量。這是默認(rèn)設(shè)置。 args: 'after-used' 只有最后一個(gè)參數(shù)必須使用。例如，這允許您為函數(shù)使用兩個(gè)命名參數(shù)，并且只要您使用第二個(gè)參數(shù)，ESLint 就不會(huì)警告您第一個(gè)參數(shù)。這是默認(rèn)設(shè)置。
  'no-useless-call': 2, // 標(biāo)記使用情況，F(xiàn)unction.prototype.call()并且Function.prototype.apply()可以用正常的函數(shù)調(diào)用來替代
  'no-useless-computed-key': 2, // 禁止不必要地使用計(jì)算屬性鍵
  'no-useless-constructor': 2, // 在不改變類的工作方式的情況下安全地移除的類構(gòu)造函數(shù)
  'no-useless-escape': 0, // 禁用不必要的轉(zhuǎn)義字符
  'no-whitespace-before-property': 2, // 如果對象的屬性位于同一行上，不允許圍繞點(diǎn)或在開頭括號之前留出空白
  'no-with': 2, //禁用with
  'no-var': 2, // 禁用var
  'one-var': [2, { initialized: 'never' }], // 強(qiáng)制將變量聲明為每個(gè)函數(shù)（對于var）或塊（對于let和const）范圍一起聲明或單獨(dú)聲明。 initialized: 'never' 每個(gè)作用域要求多個(gè)變量聲明用于初始化變量
  'operator-linebreak': [2, 'after', { overrides: { '?': 'before', ':': 'before' } }], // 實(shí)施一致的換行
  'padded-blocks': [2, 'never'], // 在塊內(nèi)強(qiáng)制執(zhí)行一致的空行填充
  'prefer-destructuring': ['error', { object: false, array: false }], // 此規(guī)則強(qiáng)制使用解構(gòu)而不是通過成員表達(dá)式訪問屬性。
  'quotes': [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }],// avoidEscape: true 允許字符串使用單引號或雙引號，只要字符串包含必須以其他方式轉(zhuǎn)義的引號 ;allowTemplateLiterals: true 允許字符串使用反引號
  'radix': 2, //parseInt必須指定第二個(gè)參數(shù)
  'semi': [2, 'never'], // 不使用分號
  'semi-spacing': [2, { before: false, after: true }], // 強(qiáng)制分號間隔
  'space-before-blocks': [2, 'always'], // 塊必須至少有一個(gè)先前的空間
  'space-before-function-paren': [2, 'never'], // 在(參數(shù)后面不允許任何空格
  'space-in-parens': [2, 'never'], // 禁止或要求（或）左邊的一個(gè)或多個(gè)空格
  'space-infix-ops': 2, // 強(qiáng)制二元運(yùn)算符左右各有一個(gè)空格
  'space-unary-ops': [2, { words: true, nonwords: false }],// words: true 如：new，delete，typeof，void，yield 左右必須有空格 // nonwords: false 一元運(yùn)算符，如：-，+，--，++，!，!!左右不能有空格
  'spaced-comment': [2, 'always', { markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }], // 注釋開始后，此規(guī)則將強(qiáng)制間距的一致性//或/*
  'template-curly-spacing': [2, 'never'], // 不允許大括號內(nèi)的空格
  'use-isnan': 2, //禁止比較時(shí)使用NaN，只能用isNaN()
  'valid-typeof': 2, //必須使用合法的typeof的值
  'wrap-iife': [2, 'any'], //立即執(zhí)行函數(shù)表達(dá)式的小括號風(fēng)格
  'yield-star-spacing': [2, 'both'], // 強(qiáng)制執(zhí)行*周圍 yield*表達(dá)式的間距，兩側(cè)都必須有空格
  'yoda': [2, 'never'],
  'prefer-const': 2, // 使用let關(guān)鍵字聲明的變量，但在初始分配后從未重新分配變量，應(yīng)改為const聲明
  'object-curly-spacing': [2, 'always', { objectsInObjects: false }],// 不允許以對象元素開始和/或以對象元素結(jié)尾的對象的大括號內(nèi)的間距
  'array-bracket-spacing': [2, 'never'] // 不允許數(shù)組括號內(nèi)的空格
 }
}

npm install -g eslint

npm install -g prettier

/* 開啟保存時(shí)自動(dòng)格式化 */
"editor.formatOnSave": true,

/* eslint的配置 */
"eslint.enable": true,
"eslint.run": "onSave",
"eslint.options": {
  "extensions": [
   ".js",
   ".vue"
  ]
 },
 "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true // 保存時(shí)自動(dòng)修復(fù)
 },
 // 關(guān)閉 vscode 默認(rèn)的檢查工具
 "html.validate.scripts": false,
 "javascript.validate.enable": false,
 "eslint.alwaysShowStatus": true,
 "eslint.format.enable": true,
 "scss.lint.duplicateProperties": "error",
 "css.lint.duplicateProperties": "error",
 "less.lint.zeroUnits": "error",
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue-html",
  "vue",
  "html"
 ],

/* prettier的配置 */
 "prettier.printWidth": 120, // 超過最大值換行
 "prettier.tabWidth": 2, // 縮進(jìn)字節(jié)數(shù)
 "prettier.useTabs": true, // 縮進(jìn)使用tab
 "prettier.semi": false, // 句尾添加分號
 "prettier.singleQuote": true, // 使用單引號代替雙引號
 "prettier.proseWrap": "preserve", // 默認(rèn)值。因?yàn)槭褂昧艘恍┱坌忻舾行偷匿秩酒鳎ㄈ鏕itHub comment）而按照markdown文本樣式進(jìn)行折行
 "prettier.arrowParens": "avoid", // (x) => {} 箭頭函數(shù)參數(shù)只有一個(gè)時(shí)是否要有小括號。avoid：省略括號
 "prettier.bracketSpacing": true, // 在對象，數(shù)組括號與文字之間加空格 "{ foo: bar }"
 "prettier.endOfLine": "auto", // 結(jié)尾是 \n \r \n\r auto
 "prettier.htmlWhitespaceSensitivity": "ignore",
 "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫在項(xiàng)目的.prettierignore文件中
 "prettier.requireConfig": false, // Require a "prettierconfig" to format prettier
 "prettier.trailingComma": "none", // 在對象或數(shù)組最后一個(gè)元素后面是否加逗號

/* 每種語言默認(rèn)的格式化規(guī)則 */
 "[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[scss]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },

npm install @vue/cli-plugin-eslint babel-eslint eslint eslint-plugin-vue prettier prettier-eslint –-save-dev