Vue3如何配置 eslint + prettier？

介绍

• ESLint 是 JavaScript 和 JSX 检查工具
• prettier 代码格式化工具

安装依赖

#安装 eslint
npm install --save-dev eslint eslint-plugin-vue

#安装 prettier
npm install --save-dev prettier eslint-plugin-prettier @vue/eslint-config-prettier

#安装 typescript 支持
npm install --save-dev @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

配置文件

1. 根目录新建 .eslintrc.js 文件

module.exports = {
  root: true,
  env: {
    browser: true,
    // 必填
    node: true,
    es2021: true
  },
  parser: 'vue-eslint-parser',
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    // eslint-config-prettier 的缩写
    'prettier'
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  // eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier 的缩写
  plugins: ['vue', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: false,
        trailingComma: 'none',
        arrowParens: 'avoid',
        printWidth: 160
      }
    ],
    'no-undef': 'off',
    'vue/multi-word-component-names': [
      'error',
      {
        ignores: []
      }
    ],
    'vue/v-on-event-hyphenation': 0 // html 上的事件允许驼峰格式 phoneCallback
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }
}

2. 根目录新建 .eslintignore 配置忽略文件

.vscode
.idea
.local
index.html
!.env-config.ts
components.d.ts
/node_modules/
/public/

3. 根目录新建 .prettierrc.js

module.exports = {
  printWidth: 160, // 单行输出（不折行）的（最大）长度  
  tabWidth: 2, // 每个缩进级别的空格数  
  tabs: false, // 使用制表符 (tab) 缩进行而不是空格 (space)  
  semi: false, // 是否在语句末尾打印分号  
  singleQuote: true, // 是否使用单引号
  quoteProps: 'as-needed', // 仅在需要时在对象属性周围添加引号  
  bracketSpacing: true, // 是否在对象属性添加空格  
  htmlWhitespaceSensitivity: 'ignore', // 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的  
  trailingComma: 'none', // 去除对象最末尾元素跟随的逗号  
  useTabs: false, // 不使用缩进符，而使用空格  
  jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号  
  // arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号  
  rangeStart: 0, // 每个文件格式化的范围是文件的全部内容  
  proseWrap: 'always', // 当超出 print width（上面有这个参数）时就折行  
  endOfLine: 'lf', // 换行符使用 lf
  "max-lines-per-function": [ 2, { max: 320, skipComments: true, skipBlankLines: true }, ] // 每个函数最大行数
}

vscode 保存并自动格式化

• 安装编译器 ESLint 插件
• 修改vscode配置

{
    "editor.formatOnSave": true, // 1
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.format.enable": true
}

保存即可自动格式；如不生效；请重启编译器～