Vue Vite 项目增加 eslint 和 prettier

Vue Vite 项目增加 eslint 和 prettier

Eslint 版本为 8.X

1. 安装 8.X 版本的 eslint

pnpm i eslint@^8.57.0 -D    

2. 安装 eslint 以及 prettier 以及一堆依赖

pnpm i eslint eslint-plugin-vue @vue/eslint-config-prettier prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-import -D

3. 安装 TS 依赖

pnpm i @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

4. 初始化 eslint

npx eslint --init 

4.1. 选择 eslint 的校验模式

选择第三个

4.2. 选择项目类型

选择第一个 ESM 规范

4.3. 选择项目框架

我们是 vue，选择第二个

4.4. 是否使用 TS

项目中建议使用 TS

4.5. 运行在哪？

我这个在浏览器

4.6. 项目风格？

选择第二个

4.7. 选择 config 文件类型

我这边选择的是 JS

4.8. 缩进

tabs

4.9. 单引号双引号

4.10. 行尾？

4.11. 是否需要分号？

习惯了不要分号

4.12. 是否添加依赖

YES

4.13. 安装方式

pnpm 更快一些

5. .eslintrc.cjs 文件

5.1. 默认生成

module.exports = {
    'env': {
        'browser': true,
        'es2021': true
    },
    'extends': [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:vue/vue3-essential'
    ],
    'overrides': [
        {
            'env': {
                'node': true
            },
            'files': [
                '.eslintrc.{js,cjs}'
            ],
            'parserOptions': {
                'sourceType': 'script'
            }
        }
    ],
    'parserOptions': {
        'ecmaVersion': 'latest',
        'parser': '@typescript-eslint/parser',
        'sourceType': 'module'
    },
    'plugins': [
        '@typescript-eslint',
        'vue'
    ],
    'rules': {
        'indent': [
            'error',
            'tab'
        ],
        'linebreak-style': [
            'error',
            'unix'
        ],
        'quotes': [
            'error',
            'single'
        ],
        'semi': [
            'error',
            'never'
        ]
    }
}

5.2. 习惯的配置

module.exports = {
  root: true,
  globals: {
    defineOptions: "readonly",
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly",
    chrome: true,
  },
  env: {
    browser: true,
    node: true,
    node: true,
  },
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: "latest",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:prettier/recommended",
  ],
  plugins: ["import"],
  settings: {
    "import/core-modules": [
      "uno.css",
      "~icons/*",
      "virtual:svg-icons-register",
    ],
  },
  rules: {
    "no-empty": 0,
    "@typescript-eslint/no-empty-function": 0,
    "@typescript-eslint/no-empty-interface": 0,
    "@typescript-eslint/no-explicit-any": 0,
    "@typescript-eslint/no-var-requires": 0,
    "@typescript-eslint/no-non-null-assertion": 0,
    "vue/multi-word-component-names": 0,
    "vue/no-unused-components": 1,
    "vue/valid-template-root": 1,
    semi: ['error', 'never'],
    "import/order": [
      "error",
      {
        "newlines-between": "never",
        // 对导入模块进行分组
        groups: [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index",
        ],
        // 通过路径自定义分组
        pathGroups: [
          {
            pattern: "vue",
            group: "external",
            position: "before",
          },
          {
            pattern: "vue-router",
            group: "external",
            position: "before",
          },
          {
            pattern: "pinia",
            group: "external",
            position: "before",
          },
          {
            pattern: "naive-ui",
            group: "external",
            position: "before",
          },
          {
            pattern: "@/constants",
            group: "internal",
            position: "before",
          },
          {
            pattern: "@/config",
            group: "internal",
            position: "before",
          },
          {
            pattern: "@/settings",
            group: "internal",
            position: "before",
          },
          {
            pattern: "@/components",
            group: "internal",
            position: "before",
          },
          {
            pattern: "@/router",
            group: "internal",
            position: "before",
          },
          {
            pattern: "@/service",
            group: "internal",
            position: "before",
          },
          {
            pattern: "@/store",
            group: "internal",
            position: "before",
          },
          {
            pattern: "@/hooks",
            group: "internal",
            position: "before",
          },
          {
            pattern: "@/utils",
            group: "internal",
            position: "before",
          },
          {
            pattern: "@/assets",
            group: "internal",
            position: "before",
          },
          {
            pattern: "@/**",
            group: "internal",
            position: "before",
          },
        ],
        pathGroupsExcludedImportTypes: [
          "vue",
          "vue-router",
          "pinia",
          "naive-ui",
        ],
      },
    ],
  },
};

6. .eslintignore 文件

需要过滤的文件

*.sh
*.woff
*.tff
*.html
*.yaml
*.md
node_modules
.vscode
.idea
.husky
/public
/docs
/bin
/app/public

components.d.ts /**
route.d.ts
manifest.json
*.json

7. .prettierrc.js 文件

module.exports = {
  trailingComma: 'none',
  singleQuote: true,
    semi: true,
  bracketSpacing: true,
  printWidth: 100,
  tabWidth: 2,
}

8. .prettierrc.json 文件

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

9. .prettierignore 文件

# 忽略格式化文件 (根据项目需要自行添加)
node_modules

10. .vscode/extensions.json 文件

{
  "recommendations": [
    "Vue.vscode-typescript-vue-plugin", 
    "antfu.iconify", // iconify 图标显示
    "antfu.unocss", // unocss 代码提示
    "christian-kohler.path-intellisense", // 文件路径提示/补全
    "dbaeumer.vscode-eslint", // eslint
    "esbenp.prettier-vscode", // prettier
    "eamodio.gitlens", // git
    "editorconfig.editorconfig", // editorconfig
    "mikestead.dotenv", // .env支持
    "naumovs.color-highlight", // 颜色高亮
    "steoates.autoimport",
    "vue.volar" // vue3
  ]
}

11. .vscode/settings.json 文件

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.fontLigatures": true,
  "editor.formatOnSave": false,
  "editor.guides.bracketPairs": "active",
  "editor.quickSuggestions": {
    "strings": true
  },
  "eslint.enable": true,
  "editor.tabSize": 2,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "json",
    "jsonc",
    "json5",
    "yaml",
    "yml",
    "markdown"
  ],
  "files.associations": {
    "*.env.*": "dotenv"
  },
  "files.eol": "\n",
  "path-intellisense.mappings": {
    "@": "${workspaceFolder}/src",
    "~@": "${workspaceFolder}/src"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
    "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  }
}