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"
  }
}