Vue 使用 Eslint 和 Prettier 并采用 Airbnb 规范

原创已于 2023-08-19 22:39:18 修改 · 688 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-08-19 22:37:39 首次发布

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文指导如何使用VueCreate创建新项目，配置ESLint和Airbnb规范，以及在VSCode中安装相关插件，设置自动格式化功能，确保代码质量和保存时的美观性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始化项目

使用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
}