Vue3+TS项目，eslint、prettier安装配置_vue3 ts 安装eslint

        eslint和prettier的作用主要为：可以规范团队的代码风格。在实际项目中，团队的每个成员的编码习惯都不同，这极有可能造成，一个项目多个代码风格，这会造成代码阅读困难，后期维护难度大灯问题，这就需要配置下eslint和prettier。

1.eslint

1.安装依赖

首先我们需要先安装 @eslint/create-config 插件：

pnpm install -D @eslint/create-config

提示我未安装eslint，按y，回车安装

Need to install the following packages:
  eslint@8.57.0
Ok to proceed? (y) y

接下来执行初始化。

npx eslint --init

接下来会有弹出一些问题，可根据自身项目情况进行回答，期间会询问是否需要安装相应插件，y->回车。

2.配置eslintrc

会在项目根目录下生成.eslintrc.cjs文件，然后对项目进行自己需要的配置

module.exports = {
    // 使 eslint 支持 node 与 ES6
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    // 引入推荐的语法校验规则
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended'
    ],
    overrides: [],
    // 这里一定要配置对 先使用vue-eslint-parser 再使用@typescript-eslint/parser
    // 先解析 <template> 标签中的内容 然后再解析 vue <script> 标签中的 TS 代码
    // 选择使用的解析器
    parser: 'vue-eslint-parser',
    // 解析器的详细配置
    parserOptions: {
        // 使用最新版 ES 语法
        ecmaVersion: 'latest',
        // 使用 ESLint TS 解析器
        parser: '@typescript-eslint/parser',
        // 使用 ES 模块化规范
        sourceType: 'module'
    },
    // 使用的插件
    plugins: ['vue', '@typescript-eslint'],
    // 自定义规则
    rules: {
        '@typescript-eslint/no-unused-vars': 'off',
        indent: [
            'error',
            4,
            {
                SwitchCase: 1
            }
        ],
        'vue/multi-word-component-names': [
            'error',
            {
                ignores: ['index', 'Header'] //需要忽略的组件名
            }
        ],
        '@typescript-eslint/no-var-requires': 'off',
        '@typescript-eslint/no-explicit-any': 'off',
        semi: 'off',
        '@typescript-eslint/no-this-alias': 'off',
        'eslintno-debugger': 'off',
        'vue/no-unused-vars': 'off',
        'vue/no-template-shadow': 'off',
        'vue/require-v-for-key': 'off',
        'vue/no-textarea-mustache': 'off',
        'vue/no-v-html': 'off'
    }
};

3.配置下忽略文件eslintignore

在根目录下创建.eslintignore文件，排除一些文件夹

node_modules
*.md
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile
.eslintrc.js

4.配置package.json

然后配置下package.json中的启动命令，这样便可以执行 pnpm run lint:fix 来进行自动格式化代码。

  "scripts": {
    "dev": "vite --open",
    "test": "echo \"Error: no test specified\" && exit 1",
    "eslint:fix": "eslint --fix"
  },

2 prettier

 1.安装 prettier 依赖

pnpm install -D prettier

pnpm install -D eslint-config-prettier eslint-plugin-prettier

2.创建.prettierrc.js 文件

module.exports = {
    "singleQuote": true,
    "semi": false,
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "ignore",
    "endOfLine": "auto",
    "trailingComma": "all",
    "tabWidth": 2,
    
    "printWidth": 100,
    "useTabs": false,
    "bracketSameLine": true,
    "arrowParens": "always",
    "vueIndentScriptAndStyle": false,
    "singleAttributePerLine": false
  }

3.创建 .prettierignore 文件

dist/
node_modules/
.vscode/
.idea/
/public/*
.local
**/*.svg
**/*.sh

4.配置package.json

{
  "scripts": {
    "lint:prettier": "prettier --write **/*.{js,json,tsx,css,less,scss,vue,html,md}"
  }
}