使用 vite 创建的 vue3 项目有点简陋,很多功能都没有。所以本文将讲解一下如何对 vite + vue3 项目配置代码自动格式化。配置完成后的效果如下图所示:
安装 VSCode 插件
打开 VSCode,安装以下插件:
eslint
stylelint
volar
打开 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"
],
安装项目依赖
安装以下依赖:
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
注意,有些依赖版本对不上的时候,会造成格式化失败。例如 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": "^14