vscode + vite + vue3 + ts + eslint + stylelint 代码自动格式化_vite lintonsave

使用 vite 创建的 vue3 项目有点简陋，很多功能都没有。所以本文将讲解一下如何对 vite + vue3 项目配置代码自动格式化。配置完成后的效果如下图所示：

安装 VSCode 插件

打开 VSCode，安装以下插件：

eslint
stylelint
volar
1
2
3

打开 VSCode 配置文件（Maccommand + shift + p，windowsctrl + shift + p，输入settings）。

在配置文件中加入以下代码：

"editor.codeActionsOnSave": {
    "source.fixAll": true,
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript"
],
"eslint.alwaysShowStatus": true,
"stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "vue",
    "sass"
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

安装项目依赖

安装以下依赖:

npm i -D eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-typescript eslint-plugin-vue husky sass stylelint stylelint-config-standard stylelint-scss typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser vue-eslint-parser
1

注意，有些依赖版本对不上的时候，会造成格式化失败。例如 eslint 插件使用 8.0 版本以上格式化就报错，后来使用的是 7.0 的版本。安装后的具体版本如下：

"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.2.0",
"eslint-config-airbnb-base": "
1
2
3