eslint 配置 - 硅谷甄選

eslint中文官網(wǎng): http://eslint.cn/

插件化的javascript代碼檢測(cè)工具

首先安裝eslint（同時(shí)也安裝了prettier）

pnpm i eslint -D

生成配置文件:.eslint.cjs

npx eslint --init

.eslint.cjs配置文件

module.exports = {
   // 1. 運(yùn)行環(huán)境
    "env": { 
        "browser": true,//瀏覽器端
        "es2021": true,//es2021
    },
    // 2. 規(guī)則繼承
    "extends": [ 
       //全部規(guī)則默認(rèn)是關(guān)閉的,這個(gè)配置項(xiàng)開啟推薦規(guī)則,推薦規(guī)則參照文檔，比如:函數(shù)不能重名、對(duì)象不能出現(xiàn)重復(fù)key
        "eslint:recommended",
        //vue3語法規(guī)則
        "plugin:vue/vue3-essential",
        //ts語法規(guī)則
        "plugin:@typescript-eslint/recommended"
    ],
    // 3. 要為特定類型的文件指定處理器
    "overrides": [
    ],
    // 4. 指定解析器:解析器
    //Esprima 默認(rèn)解析器
    //Babel-ESLint babel解析器
    //@typescript-eslint/parser ts解析器
    "parser": "@typescript-eslint/parser",
    // 5. 指定解析器選項(xiàng)
    "parserOptions": {
        "ecmaVersion": "latest",//校驗(yàn)ECMA最新版本
        "sourceType": "module"http://設(shè)置為"script"（默認(rèn)），或者"module"代碼在ECMAScript模塊中
    },
    // 6. ESLint支持使用第三方插件。在使用插件之前，您必須使用npm安裝它
    //該eslint-plugin-前綴可以從插件名稱被省略
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    // 7. eslint規(guī)則
    "rules": {
    }
}

1.1vue3環(huán)境代碼校驗(yàn)插件

# 讓所有與prettier規(guī)則存在沖突的Eslint rules失效，并使用prettier進(jìn)行代碼檢查
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
# 運(yùn)行更漂亮的Eslint，使prettier規(guī)則優(yōu)先級(jí)更高，Eslint優(yōu)先級(jí)低
"eslint-plugin-prettier": "^4.2.1",
# vue.js的Eslint插件（查找vue語法錯(cuò)誤，發(fā)現(xiàn)錯(cuò)誤指令，查找違規(guī)風(fēng)格指南
"eslint-plugin-vue": "^9.9.0",
# 該解析器允許使用Eslint校驗(yàn)所有babel code
"@babel/eslint-parser": "^7.19.1",

安裝指令

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

1.2修改.eslintrc.cjs配置文件

// @see https://eslint.bootcss.com/docs/rules/

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  /* 指定如何解析語法 */
  parser: 'vue-eslint-parser',
  /** 優(yōu)先級(jí)低于 parse 的語法解析配置 */
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true,
    },
  },
  /* 繼承已有的規(guī)則 */
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['vue', '@typescript-eslint'],
  /*
   * "off" 或 0    ==>  關(guān)閉規(guī)則
   * "warn" 或 1   ==>  打開的規(guī)則作為警告（不影響代碼執(zhí)行）
   * "error" 或 2  ==>  規(guī)則作為一個(gè)錯(cuò)誤（代碼不能執(zhí)行，界面報(bào)錯(cuò)）
   */
  rules: {
    // eslint（https://eslint.bootcss.com/docs/rules/）
    'no-var': 'error', // 要求使用 let 或 const 而不是 var
    'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允許多個(gè)空行
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unexpected-multiline': 'error', // 禁止空余的多行
    'no-useless-escape': 'off', // 禁止不必要的轉(zhuǎn)義字符

    // typeScript (https://typescript-eslint.io/rules)
    '@typescript-eslint/no-unused-vars': 'error', // 禁止定義未使用的變量
    '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
    '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 類型
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-namespace': 'off', // 禁止使用自定義 TypeScript 模塊和命名空間。
    '@typescript-eslint/semi': 'off',

    // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
    'vue/multi-word-component-names': 'off', // 要求組件名稱始終為 “-” 鏈接的單詞
    'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的變量<template>被標(biāo)記為未使用
    'vue/no-mutating-props': 'off', // 不允許組件 prop的改變
    'vue/attribute-hyphenation': 'off', // 對(duì)模板中的自定義組件強(qiáng)制執(zhí)行屬性命名樣式
  },
}

1.3.eslintignore忽略文件

dist
node_modules

1.4運(yùn)行腳本

package.json新增兩個(gè)運(yùn)行腳本

"scripts": {
    "lint": "eslint src",
    "fix": "eslint src --fix",
}

eslint 配置 - 大事件

環(huán)境同步：

1. 安裝vscode自帶的可安裝插件 ESlint，并用npm在自己的項(xiàng)目中安裝ESlint，配置保存時(shí)自動(dòng)修復(fù)

打開設(shè)置，找到 settings.json，進(jìn)行配置。

2. 禁用 vscode 本身自帶的可安裝插件 Prettier，用npm在自己的項(xiàng)目中安裝Prettier，并關(guān)閉保存自動(dòng)格式化（format on save）

// ESlint插件 + Vscode配置 實(shí)現(xiàn)自動(dòng)格式化修復(fù)
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
//關(guān)閉保存時(shí)自動(dòng)格式化
"editor.formatOnSave": false,

配置文件 .eslintrc.cjs

1. prettier 風(fēng)格配置 https://prettier.io

   1. 單引號(hào)

   2. 不使用分號(hào)

   3. 每行寬度至多80字符

   4. 不加對(duì)象|數(shù)組最后逗號(hào)

   5. 換行符號(hào)不限制（win mac 不一致）

2. vue組件名稱多單詞組成（忽略index.vue）

3. props解構(gòu)（關(guān)閉）

文章來源地址http://www.zghlxwxcb.cn/news/detail-827727.html

  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 單引號(hào)
        semi: false, // 無分號(hào)
        printWidth: 80, // 每行寬度至多80字符
        trailingComma: 'none', // 不加對(duì)象|數(shù)組最后逗號(hào)
        endOfLine: 'auto' // 換行符號(hào)不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue組件名稱多單詞組成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 關(guān)閉 props 解構(gòu)的校驗(yàn)（props解構(gòu) 丟失響應(yīng)式）
    // ?? 添加未定義變量錯(cuò)誤提示，create-vue@3.6.3 關(guān)閉。
    'no-undef': 'error'
  }

到了這里，關(guān)于【eslint】eslint 配置 - 以硅谷甄選和大事件項(xiàng)目為例的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！