Vue3如何通過ESLint校驗代碼是否符合規范詳解

npm install eslint  --save-dev

npx  eslint --init

You can also run this command directly using 'npm init @eslint/config'.
npx: 40 安裝成功，用時 27.246 秒
√ How would you like to use ESLint? · style       
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
? Does your project use TypeScript? » No / Yes

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

? How would you like to define a style for your project? ... 
> Use a popular style guide
  Answer questions about your style

? Which style guide do you want to follow? ...
> Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google        
  XO: https://github.com/xojs/eslint-config-xo
? What format do you want your config file to be in? ... 
> JavaScript
  YAML
  JSON
Checking peerDependencies of eslint-config-airbnb-base@latest    
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2 @typescript-eslint/parser@latest
√ Would you like to install them now with npm? · No / Yes
Installing eslint-plugin-vue@latest, @typescript-eslint/eslint-plugin@latest, eslint-config-airbnb-base@latest, eslint@^7.32.0 || ^8.2.0, eslint-plugin-import@^2.25.2, @typescript-eslint/parser@latest
npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 
3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.     
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ @typescript-eslint/[email protected]
+ @typescript-eslint/[email protected]
added 112 packages from 71 contributors, updated 4 packages and audited 195 packages in 187.851s

49 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
A config file was generated, but the config file itself may not follow your linting rules.

module.exports = {
    "env": {
        "es2021": true
    },
    "extends": [
        //默認使用vue2的配置
        //"plugin:vue/essential",
        //修改使用vue3的規則
        "plugin:vue/vue3-strongly-recommended",
        "airbnb-base"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

這個插件提供瞭一些預定義的配置。可以通過將以下配置添加到extends.
"plugin:vue/base"... 啟用正確 ESLint 解析的設置和規則。
使用 Vue.js 3.x 的配置。
"plugin:vue/vue3-essential"... base，以及防止錯誤或意外行為的規則。
"plugin:vue/vue3-strongly-recommended"... 上面，加上大大提高代碼可讀性和/或開發體驗的規則。
"plugin:vue/vue3-recommended"... 上面，加上強制執行主觀社區默認值的規則，以確保一致性。
使用 Vue.js 2.x 的配置。
"plugin:vue/essential"... base，以及防止錯誤或意外行為的規則。
"plugin:vue/strongly-recommended"... 上面，加上大大提高代碼可讀性和/或開發體驗的規則。
"plugin:vue/recommended"...以上，加上強制執行主觀社區默認值以確保一致性的規則。

"scripts": {
    "dev":"vite",
    "lint": "eslint ./src/**/*.{js,vue,ts,tsx,jsx} --fix"
  },

npx mrm@2 lint-staged

 "lint-staged": {
    "*.{js,vue,ts}": [
      "eslint --cache --fix",  
      "npm run lint",          //執行lint校驗規則，不需要手動校驗
      "git add"                  / /修改後的文件添加git
    ]
  }