vue3+vite配置eslint&prettier

一、创建一个 vite + vue3 + ts 项目

npm init vite@latest
1

二、安装 eslint 依赖

npm i eslint@7.23.0 eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
1

• eslint: ESLint 的核心代码。
• eslint-plugin-vue：包含常用的 vue 规范。
• @typescript-eslint/parser：ESLint 的解析器，用于解析 typescript，从而检查和规范 Typescript 代码。
• @typescript-eslint/eslint-plugin：包含了各类定义好的检测 Typescript 代码的规范。

三、eslint 相关配置说明

环境配置 env
一个环境定义了一组预定义的全局变量。可用的环境包括

• browser - 浏览器环境中的全局变量。
• node - Node.js 全局变量和 Node.js 作用域。
• commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
• shared-node-browser - Node.js 和 Browser 通用全局变量。
• es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
• worker - Web Workers 全局变量。
• amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。
• mocha - 添加所有的 Mocha 测试全局变量。
• jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。
• jest - Jest 全局变量。
• phantomjs - PhantomJS 全局变量。
• protractor - Protractor 全局变量。
• qunit - QUnit 全局变量。
• jquery - jQuery 全局变量。
• prototypejs - Prototype.js 全局变量。
• shelljs - ShellJS 全局变量。
• meteor - Meteor 全局变量。
• mongo - MongoDB 全局变量。
• applescript - AppleScript 全局变量。
• nashorn - Java 8 Nashorn 全局变量。

异常等级配置

• “off” 或 0 - 关闭规则
• “warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
• “error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

四、.eslintrc.js 配置规则文件

module.exports = {
  // 当前配置为根配置，将不再从上级文件夹查找配置
  root: true,
  /* 指定如何解析语法。可以为空，但若不为空，只能配该值，原因见下文。*/
  parser: 'vue-eslint-parser',
  /* 优先级低于parse的语法解析配置 */
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  // https://eslint.bootcss.com/docs/user-guide/configuring#specifying-globals
  // globals: {
  //   Nullable: true,
  // },
  extends: [
    // 扩展使用 vue3 检查规则和eslint推荐规则
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    // typescript-eslint推荐规则,
    'plugin:@typescript-eslint/recommended',
    // prettier推荐规则,
    'prettier',
    'plugin:prettier/recommended',
  ],
  rules: {
    // 关闭名称校验
    'vue/multi-word-component-names': "off",
    // 禁止使用 var
    'no-var': 'error',
    // 优先使用 interface 而不是 type
    '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
    // 禁止any类型,报错关闭
    '@typescript-eslint/no-explicit-any': 'off',
    // 需要导出函数和类的公共类方法的显式返回和参数类型,报错关闭
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    // 禁止某些类型如String、Number,报错关闭
    '@typescript-eslint/ban-types': 'off',
    // 禁止未使用的变量,报错关闭
    '@typescript-eslint/no-unused-vars': 'off',
    // vue首行缩进两字符
    'vue/html-indent': [
      'error',
      2,
      {
        // 属性缩进的乘数。默认为1。
        attribute: 1,
        // 顶级语句的缩进倍数。默认为1。
        baseIndent: 1,
        // 右括号缩进的乘数。默认为0。
        closeBracket: 0,
        // 属性是否应垂直对齐到多行情况下的第一个属性的条件。默认为true
        alignAttributesVertically: true,
        // 忽略节点的选择器。默认是[]
        ignores: [],
      },
    ],
    // 每行最大属性数关闭
    'vue/max-attributes-per-line': ['off'],
    // 强制使用驼峰命名
    // 'vue/component-name-in-template-casing': [
    //   'error',
    //   'PascalCase',
    //   {
    //     // 如果true，则仅检查已注册的组件（在 PascalCase 中）。如果false，检查所有。默认true
    //     registeredComponentsOnly: false,
    //     ignores: [],
    //   },
    // ],
    // 编辑器里会给prettier错误进行报错
    "prettier/prettier": "error",
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

五、.eslintignore 配置 eslint 忽略文件

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
.eslintrc.js
prettier.config.js
/src/mock/*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

六、安装 prettier 依赖

npm i prettier eslint-config-prettier eslint-plugin-prettier -D
1

• prettier：prettier 插件的核心代码。
• eslint-config-prettier：解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效。
• eslint-plugin-prettier：将 prettier 作为 ESLint 规范来使用。

七、.prettierrc.js 配置规则文件

module.exports = {
  // 行位不需要分号  
  "semi": false,
  // 使用单引号
  "singleQuote": true,
  // 让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 让prettier使用eslint的代码格式进行校验
  "eslintIntegration": true,
  // 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的
  "htmlWhitespaceSensitivity": "ignore",
  // 换行符使用 auto
  "endOfLine": "auto"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

八、.prettierignore 配置 prettier 忽略文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*
1
2
3
4
5
6
7
8
9

九、关于 esint + prettier 在 webstorm 中的配置

File | Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint中选中 Automatic ESLint configuration再勾选 Run eslint --fix on save

File | Settings | Languages & Frameworks | JavaScript | Prettier中设置 Run for files 为 {**/*,*}.{js,ts,jsx,tsx,vue}。其中 On code reformat 和 On save 不需要勾选，否则会和eslint 有冲突 （可能配置有点问题）

十、package.json

注意：
// 默认为 “type”: “module”, 修改成"commonjs"
“type”: “commonjs”,
// 可添加如下两条命令
“lint”: “eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx”,
“format”: “prettier --write “**/*.{js,jsx,ts,tsx,css,vue}””

{
  "name": "xxx",
  "private": true,
  "version": "0.0.0",
  // 默认为 "type": "module", 修改成"commonjs"
  "type": "commonjs",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    // 可添加如下两条命令
    "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,css,vue}\""
  },
  "dependencies": {
    "eslint-define-config": "^1.7.0",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.36.1",
    "@typescript-eslint/parser": "^5.36.1",
    "@vitejs/plugin-vue": "^3.0.3",
    "eslint": "^7.23.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.4.0",
    "prettier": "^2.7.1",
    "typescript": "^4.6.4",
    "vite": "^3.0.7",
    "vue-tsc": "^0.39.5"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

规范查询地址：
eslint规范查询：https://cn.eslint.org/docs/rules/
vue的eslint规范查询：https://eslint.vuejs.org/rules/
typescript的eslint规范查询：https://typescript-eslint.io/rules/