Vue3 + TS + ESLint + Prettier配置模板

配置文件

.eslintignore     //eslint忽略文件
.eslintrc.js      // eslint规则
.prettierignore   // prettier忽略文件
.prettierrc.json  // prettier规则配置

1 安装eslint支持

yarn add -D eslint

自动构建eslint+prettier配置模板

yarn eslint --init

选择js生成.eslintrc.js也可以.eslintrc.json

2.1 配置.eslintrc.js

module.exports = {
    env: {
        browser: true,
        es2021: true
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-essential',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended'
    ],
    overrides: [],
    parser: 'vue-eslint-parser',
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        parser: '@typescript-eslint/parser'
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {
        'no-undef': 'off',
        'no-mixed-spaces-and-tabs': 'off',
        indent: ['error', 'tab'],
        'linebreak-style': ['error', 'windows'],
        quotes: ['error', 'single'],
        semi: ['error', 'never'],
        '@typescript-eslint/no-explicit-any': ['off'],
        'vue/no-mutating-props': [
            'error',
            {
                shallowOnly: true
            }
        ],
        'vue/multi-word-component-names': [
            'error',
            {
                ignores: ['index']
            }
        ]
    }
}

各个插件配置和options选项配置可以查看chatgpt

2.2 忽略文件配置.eslintignore

dist/*
build/*
/node_modules/**
/public/*

这是我的vue项目的文件忽略

3.1  开始配置prettier   .prettierrc.json

{
  "printWidth": 100,
  "tabWidth": 1,
  "useTabs": true,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "always",
  "htmlWhitespaceSensitivity": "ignore",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto",
  "singleAttributePerLine": false
}

说明：因为上面eslint使用1个tab，所以prettier也要用tab，useTabs：true,并且tabWidth：1

文件说字段说明：

{
  "printWidth": 100,    //每行最多显示的字符数
  "tabWidth": 2,//tab的宽度 2个字符
  "useTabs": false,//禁止使用tab代替空格
  "semi": true,//结尾使用分号
  "singleQuote": true,//使用单引号代替双引号
  "trailingComma": "none",//结尾是否添加逗号
  "bracketSpacing": true,//对象括号俩边是否用空格隔开
  "bracketSameLine": true,;//组件最后的尖括号不另起一行
  "arrowParens": "always",//箭头函数参数始终添加括号
  "htmlWhitespaceSensitivity": "ignore",//html存在空格是不敏感的
  "vueIndentScriptAndStyle": false,//vue 的script和style的内容是否缩进
  "endOfLine": "auto",//行结尾形式 mac和linux是\n  windows是\r\n 
  "singleAttributePerLine": false //组件或者标签的属性是否控制一行只显示一个属性
}

3.2 .eslintignore

dist/*
build/*
node_modules/**
public/*
vite-env.d.ts
auto-imports.d.ts
components.d.ts