vue3+vite+TS配置EsLint_vue3 vite ts eslint 配置

当你搭建好vue3+vite+TS模板后，想引入eslint规范

第一步

1.安装EsLint

 npm i -D eslint

2.初始化配置EsLint

npx eslint --init

 1.选择模式： To check syntax, find problems, and enforce code style 严格模式

You can also run this command directly using 'npm init @eslint/config'.
? How would you like to use ESLint? ... 
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style

2.选择语言模块：选择javascript

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

3.选择语言框架 选择vue.js

? Which framework does your project use? ...
  React
> Vue.js
  None of these

4.是否使用ts，视自己情况而定，我选择的Yes

 ? Does your project use TypeScript? » No / Yes

5.代码在哪里运行 使用空格键全选 浏览器+node

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

6.选择一个风格：选择流行的即可

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

7.你想遵循哪一种风格指南? 选择 Standard 我一直用的这个社区指南，感觉很好。认可度也高

? 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

8.你希望您的配置文件是什么格式? 选择js即可

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

9.可能会出现下面的提示，选择yes即可

? The style guide "standard" requires eslint@^7.12.1. You are currently using eslint@8.10.0.
  Do you want to downgrade? » No / Yes

10.会问你是用npm安装还是yarn安装，视自己情况而定，我这里选择的npm(yes)

? Would you like to install them now with npm? » No / Yes

3.安装完成之后，在项目根目录会出现.eslintrc.js文件

// .eslintrc.js 文件
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}

5. 继续安装 

npm i -D vite-plugin-eslint
 
npm i @typescript-eslint/parser  //一个eslint的解析器，允许使用typescrpt ESTree来对ts代码进行规范约束。
 
npm i @typescript-eslint/eslint-plugin  //一个为ts代码提供约束规则的插件，需要确保项目中已安装 

6. 在package.json文件中添加： "@babel/eslint-parser": "^7.17.0"（我忘了npm的安装名了~）

// package.json 文件
"devDependencies": {
    ...
    "@babel/eslint-parser": "^7.17.0"
  }

7. 执行npm install

npm install

8. 配置vite.config.js文件

// vite.config.js 文件
import eslintPlugin from 'vite-plugin-eslint'
 
export default defineConfig({
  plugins: [
    vue(),
    // 添加下面这块
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
    })
  ]
}

9. 配置.eslintrc.js文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
    'vue/setup-compiler-macros': true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard-with-typescript',
    'plugin:@typescript-eslint/recommended'
  ],
  overrides: [
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
    semi: [2, 'never'], // 禁止尾部使用分号“ ; ”
    'no-var': 'error', // 禁止使用 var
    indent: ['error', 2], // 缩进2格
    'no-mixed-spaces-and-tabs': 'error', // 不能空格与tab混用
    quotes: [2, 'single'] // 使用单引号
  }
}