使用 ESLint 来检测语法和代码规范
- 创建项目，选择手动配置，选择 ESLint + Standard config，选择 Lint on save
vue create learn-vue
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
❯ Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all,
<i> to invert selection, and <enter> to proceed)
❯◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x
2.x
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
❯ ESLint + Standard config
ESLint + Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert
selection, and <enter> to proceed)
❯◉ Lint on save
◯ Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
? Save this as a preset for future projects? (y/N) N
- 进入项目目录，打开 VSCode
cd learn-vue
code .
- 修改 VSCode 工作区配置文件，设置保存文件的时候自动使用 eslint 来检测语法与代码规范
{
// 千万不要加这一句，否则保存文件的时候会启动 format 来检测代码规范，会与 eslint 的 Standard 规则冲突
// "editor.formatOnSave": true,
// 保存文件的时候自动使用 eslint 来检测语法与代码规范
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
至此，在 VSCode 中保存位于项目目录中的 js 文件或 .vue 文件的时候，会自动使用 eslint 来检测语法与代码规范，代码规范必须符合 Standard 规范。
使用 ESLint 来检测语法，使用 Prettier 来检测代码规范
- 创建项目，选择手动配置，选择 ESLint with error prevention only，选择 Lint on save
vue create learn-vue
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
❯ Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all,
<i> to invert selection, and <enter> to proceed)
❯◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x
2.x
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert
selection, and <enter> to proceed)
❯◉ Lint on save
◯ Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
? Save this as a preset for future projects? (y/N) N
- 进入项目目录，安装 eslint-config-prettier，打开 VSCode
cd learn-vue
npm i -D eslint-config-prettier
code .
- 修改
.eslintrc.js文件，手动加上extends: 'prettier'
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended'
'prettier'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
- 手动创建 Prettier 配置文件
.prettierrc.js
module.exports = {
// 是否使用尾逗号
trailingComma: 'none',
// 按 Tab 键的时候的缩进方式，true 使用 tab 缩进，false 将 tab 转换为空格缩进
useTabs: false,
// useTabs: false 的时候，使用空格缩进缩进几个空格
tabWidth: 4,
// 语句结尾是否加分号
semi: true,
// 字符串是否使用单引号
singleQuote: true
}
- 修改 VSCode 工作区配置文件
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
至此，在 VSCode 中保存位于项目目录中的 js 文件或 .vue 文件的时候，会自动使用 eslint 来检测语法，使用 Prettier 来格式化代码规范。
