vue2項(xiàng)目增加eslint配置代碼規(guī)范示例

更新時(shí)間：2022年08月08日 10:56:02 作者：Caroline皮皮

這篇文章主要為大家介紹了vue2項(xiàng)目增加eslint配置代碼規(guī)范示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

eslint用于代碼檢查，prettier用于代碼格式化，具體操作如下

1.安裝以下eslint插件

安裝以下eslint插件，并增加.eslintrc.js配置文件，.eslintignore配置忽略檢查的文件

（1）eslint

用于檢查和標(biāo)示出ECMAScript/JavaScript代碼規(guī)范問題工具。

（2）@babel/eslint-parser

簡(jiǎn)而言之就是一個(gè)解析器，允許您使用ESLint對(duì)所有有效的Babel代碼進(jìn)行檢查。

ESLint允許使用自定義解析器，當(dāng)使用此插件時(shí)，代碼會(huì)被Babel解析器解析，并且生成的AST被轉(zhuǎn)換成一個(gè)ESLint可以理解的符合ESTree的結(jié)構(gòu)，所有的位置信息如行列也會(huì)保留，因此可以輕松的追蹤錯(cuò)誤

（3）eslint-plugin-vue

Vue.js的官方ESLint插件,即使用eslint檢查.vue文件的template和script

（4）eslint-config-prettier或者@vue/eslint-config-prettier

當(dāng)prettier與eslint有些規(guī)則沖突時(shí)，使用prettier的規(guī)則進(jìn)行覆蓋

其中@vue/cli-plugin-eslint是特別為@vue/cli&create vue setups使用而設(shè)計(jì)的

（5）@vue/cli-plugin-eslint

vue-cli的eslint 插件，檢查和修復(fù)文件

1.1 .eslintrc.js文件配置

module.exports = {
  root: true, // 在根目錄下尋找.eslintrc.js文件，如果當(dāng)前工作區(qū)打開的項(xiàng)目不是在根目錄，則查找.eslintrc.js文件會(huì)失敗，且eslint檢查也不會(huì)生效
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'plugin:prettier/recommended', // 沖突時(shí)使用prettier的規(guī)則進(jìn)行覆蓋
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/multi-word-component-names': 'off', // 不校驗(yàn)組件名
    "vue/no-multiple-template-root": 0, // 不需要使用根元素包裹template的內(nèi)容
  }
};

1.2 .eslintignore文件的配置

node_modules
dist

2. 安裝prettier

安裝prettier，并增加.prettierrc.js文件

代碼格式化工具，通過.prettierrc.js文件進(jìn)行配置代碼規(guī)范 .prettierrc.js相關(guān)配置如下

//配置參照 https://prettier.io/docs/en/options.html
module.exports = {
    tabWidth: 2, // tab 使用兩個(gè)空格
    endOfLine: "auto", // 保持現(xiàn)有的行尾
    useTabs: false, // 不使用制表符縮進(jìn)，使用空格縮進(jìn)
    semi: true, // 代碼需要分號(hào)結(jié)尾
    singleQuote: true, // 單引號(hào)
    bracketSpacing: true, // 對(duì)象左右兩側(cè)需要空格
    jsxBracketSameLine: false, // html 關(guān)閉標(biāo)簽換行
    arrowParens: 'avoid', // 單參數(shù)的箭頭函數(shù)參數(shù)不需要括號(hào)
    proseWrap: 'never', // markdown文檔不換行
    trailingComma: 'none' // 結(jié)尾處不加逗號(hào)
  }

3. package.json相關(guān)代碼

"devDependencies": {
  "@babel/eslint-parser": "^7.18.9",
  "@vue/cli-plugin-eslint": "^5.0.8",
  "eslint": "^7.32.0",
  "eslint-config-prettier": "^8.5.0",
  "eslint-plugin-vue": "^8.7.1",
  "prettier": "^2.7.1",
}

4. vscode的配置

（1）配置eslint、prettier插件

vscode工具欄右下角兩個(gè)插件的啟用狀態(tài)

（2）setting.json文件的配置

{
   // 用于保存時(shí)使用進(jìn)行代碼格式化
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
    },
    // 用于vscode右下角工具欄展示eslint標(biāo)識(shí)
    "eslint.alwaysShowStatus": true,
}