初始化项目
- 使用
vue create ${projectName}
创建一个新项目。 - 选择
Manually select features
进行项目初始化配置。 - 在
Pick a linter / formatter config:
中选择ESLint + Airbnb config
. - 在
Where do you prefer placing config for Babel, ESLint, etc.
中选择In dedicated config files
此时项目根目录中就会出现.eslintrc.js
文件。
在 VSCode 中安装 ESLint 和 Prettier 插件及相关设置
- 下载并启用
ESLint
- 下载并启用
Prettier ESLint
- 在
settings.json
中配置 以下命令
editor.formatOnSave": true, // 保存时启动格式化
// 配置 vue 和 JavaScript 的默认格式化工具
"[vue]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"[javascript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
// 最为重要
"editor.codeActionsOnSave": {
"source.fixAll": true
}
完成上述配置后,使用ctrl + s
即可看到格式化效果