vue3+vite+ts+eslint+prettier搭建

7/26/2022 Vite

# 创建项目

pnpm create vite my-vue-app --template vue-ts

# 配置eslint

yarn add eslint -D

# 执行eslint初始化命令

yarn eslint init

# 依次初始化选项

(1) How would you like to use ESLint?
选择：To check syntax and find problems

(2) What type of modules does your project use?
选择：JavaScript modules (import/export)

(3) Which framework does your project use?
选择：Vue.js

(4) Does your project use TypeScript?
选择：Yes

(5) Where does your code run?
选择：Browser

(6) What format do you want your config file to be in?
选择：JavaScript

(7) Would you like to install them now?
选择：Yes

(8) Which package manager do you want to use?
选择：yarn

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 依赖安装完成后，会生成.eslintrc.js配置文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 在package.json文件中的script中添加lint命令

{
    "scripts": {
        // eslint . 为指定lint当前项目中的文件
        // --ext 为指定lint哪些后缀的文件
        // --fix 开启自动修复
        "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
    }
}

1
2
3
4
5
6
7
8

# 执行lint

yarn lint

这个时候是存在报错的意思就是在解析.vue后缀的文件时候出现解析错误parsing error

查阅资料后发现，eslint默认是不会解析.vue后缀文件的。因此，需要一个额外的解析器来解析.vue后缀文件。

但是我们查看.eslintrc.js文件中的extends会发现已经有继承"plugin:vue/vue3-essential"的配置。然后在node_modules中可以找到eslint-plugin-vue/lib/cinfigs/essential，里面配置了extends是继承于同级目录下的base.js，在里面会发现parser: require.resolve('vue-eslint-parser')这个配置。因此，按道理来说应该是会解析.vue后缀文件的

继续往下看.eslintrc.js文件中的extends会发现，extends中还有一个"plugin:@typescript-eslint/recommended"，它是来自于/node_modules/@typescript-eslint/eslint-plugin/dist/configs/recommended.js，查看该文件会发现最终继承于同级目录下的base.js文件。从该文件中可以发现parser: '@typescript-eslint/parser',配置。

按照.eslintrc.js文件中的extends配置的顺序可知，最终导致报错的原因就是@typescript-eslint/parser把vue-eslint-parser覆盖了。

{
   "extends": [
       "eslint:recommended",
       "plugin:vue/vue3-essential",
       "plugin:@typescript-eslint/recommended"
   ],
}

1
2
3
4
5
6
7

查看eslint-plugin-vue官方文档可知。如果已经使用了另外的解析器（例如"parser": "@typescript-eslint/parser"），则需要将其移至parseOptions，这样才不会与vue-eslint-parser冲突。

修改.eslintrc.js文件

module.exports = {
   "env": {
       "browser": true,
       "es2021": true,
       "node": true
   },
   "extends": [
       "eslint:recommended",
       "plugin:vue/vue3-essential",
       "plugin:@typescript-eslint/recommended"
   ],
   "parser": "vue-eslint-parser",
   "parserOptions": {
       "ecmaVersion": "latest",
       "parser": "@typescript-eslint/parser",
       "sourceType": "module"
   },
   "plugins": [
       "vue",
       "@typescript-eslint"
   ],
   "rules": {
   }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

两个parser的区别在于，外面的parser用来解析.vue后缀文件，使得eslint能解析template标签中的内容，而parserOptions中的parser，即@typescript-eslint/parser用来解析vue文件中script标签中的代码。

此时，再执行pnpm lint，就会发现校验通过了。

# 安装vscode插件ESLint

如果写一行代码就要执行一遍lint命令，这效率就太低了。所以我们可以配合vscode的ESLint插件，实现每次保存代码时，自动执行lint命令来修复代码的错误。

在项目中新建.vscode/settings.json文件，然后在其中加入以下配置。或者在自己的vscode中设置

# 安装依赖说明

eslint*： JavaScript 和 JSX 检查工具
eslint*-plugin-vue：使用 ESLint 检查 .vue文件的 template 和 script，以及.js文件中的Vue代码

# 配置prettier

yarn add prettier -D

# 在根目录下新建.prettierrc.cjs

module.exports = {
    // 一行的字符数，如果超过会进行换行，默认为80
    printWidth: 80, 
    // 一个tab代表几个空格数，默认为80
    tabWidth: 2, 
    // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
    useTabs: false, 
    // 字符串是否使用单引号，默认为false，使用双引号
    singleQuote: true, 
    // 行位是否使用分号，默认为true
    semi: false, 
    // 是否使用尾逗号，有三个可选值"<none|es5|all>"
    trailingComma: "none", 
    // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
    bracketSpacing: true
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 安装vscode的Prettier - Code formatter插件

在*.vscode/settings.json中添加一下规则或者在vscode设置中添加

{
    // 保存的时候自动格式化
    "editor.formatOnSave": true,
    // 默认格式化工具选择prettier
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

1
2
3
4
5
6

# 解决eslint与prettier的冲突

在理想的状态下，eslint与prettier应该各司其职。eslint负责我们的代码质量，prettier负责我们的代码格式。但是在使用的过程中会发现，由于我们开启了自动化的eslint修复与自动化的根据prettier来格式化代码。所以我们已保存代码，会出现屏幕闪一起后又恢复到了报错的状态。

这其中的根本原因就是eslint有部分规则与prettier冲突了，所以保存的时候显示运行了eslint的修复命令，然后再运行prettier格式化，所以就会出现屏幕闪一下然后又恢复到报错的现象。这时候你可以检查一下是否存在冲突的规则。

查阅资料会发现，社区已经为我们提供了一个非常成熟的方案，即eslint-config-prettier + eslint-plugin-prettier。

eslint-plugin-prettier：基于 prettier 代码风格的 eslint 规则，即使eslint使用pretter规则来格式化代码。
eslint-config-prettier：禁用所有与格式相关的 eslint 规则，解决 prettier 与 eslint 规则冲突，确保将其放在 extends 队列最后，这样它将覆盖其他配置

# 安装依赖

pnpm add eslint-config-prettier eslint-plugin-prettier -D

# 在 .eslintrc.cjs中extends的最后添加一个配置

{ 
    extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
+    // 新增，必须放在最后面
+    'plugin:prettier/recommended' 
  ],
}

1
2
3
4
5
6
7
8
9

最后重启vscode，你会发现冲突消失了，eslint与prettier也按照我们预想的各司其职了。

opig

Choose mode