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
}

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

以上关于Vue3如何配置 eslint + prettier？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。