Vue CLI 创建 ES6 项目

使用 ESLint 来检测语法和代码规范

1. 创建项目，选择手动配置，选择 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

2. 进入项目目录，打开 VSCode

cd learn-vue
code .

3. 修改 VSCode 工作区配置文件，设置保存文件的时候自动使用 eslint 来检测语法与代码规范

{
    // 千万不要加这一句，否则保存文件的时候会启动 format 来检测代码规范，会与 eslint 的 Standard 规则冲突
    // "editor.formatOnSave": true,

    // 保存文件的时候自动使用 eslint 来检测语法与代码规范
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

至此，在 VSCode 中保存位于项目目录中的 js 文件或 .vue 文件的时候，会自动使用 eslint 来检测语法与代码规范，代码规范必须符合 Standard 规范。

使用 ESLint 来检测语法，使用 Prettier 来检测代码规范

1. 创建项目，选择手动配置，选择 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

2. 进入项目目录，安装 eslint-config-prettier，打开 VSCode

cd learn-vue
npm i -D eslint-config-prettier
code .

3. 修改 .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'
  }
}

4. 手动创建 Prettier 配置文件 .prettierrc.js

module.exports = {
    // 是否使用尾逗号
    trailingComma: 'none',
    // 按 Tab 键的时候的缩进方式，true 使用 tab 缩进，false 将 tab 转换为空格缩进
    useTabs: false,
    // useTabs: false 的时候，使用空格缩进缩进几个空格
    tabWidth: 4,
    // 语句结尾是否加分号
    semi: true,
    // 字符串是否使用单引号
    singleQuote: true
}

5. 修改 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 来格式化代码规范。