（vscode setting, eslint, prettier, stylelint）

插件

vscode编译器中禁用prettier formatter, eslint插件， 安装Prettier ESLint Prettier ESLint - Visual Studio Marketplace

依赖

项目中安装：

npm install -D prettier eslint vue-eslint-parser @typescript-eslint/parser typescript stylelint stylelint-config-standard

配置

1. VSCode Setting.json (注意 "vs-code-prettier-eslint.prettierLast": true, "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",)

ctrl+p 搜索 >>setting 转json文件全局替换以下配置

{
  // 默认使用git bash代替powershell
  "terminal.integrated.defaultProfile.windows": "Bash",
  "terminal.integrated.profiles.windows": {
    "PowerShell": {
      "source": "PowerShell",
      "icon": "terminal-powershell"
    },
    "Command Prompt": {
      "path": [
        "${env:windir}\\Sysnative\\cmd.exe",
        "${env:windir}\\System32\\cmd.exe"
      ],
      "args": [],
      "icon": "terminal-cmd"
    },
    "Bash": {
      "path": "D:\\Program Files\\Git\\bin\\bash.exe"
    }
  },
  "security.workspace.trust.untrustedFiles": "open",
  "window.zoomLevel": 1,
  "editor.fontLigatures": false,
  "editor.autoClosingQuotes": "always",
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  "vue3snippets.singleQuote": true,
  "javascript.format.insertSpaceAfterSemicolonInForStatements": false,
  "javascript.format.semicolons": "remove",
  "typescript.format.semicolons": "remove",
  "css.completion.completePropertyWithSemicolon": false,
  "less.completion.completePropertyWithSemicolon": false,
  "scss.completion.completePropertyWithSemicolon": false,
  "autoimport.useSemiColon": false,
  "vue3snippets.semi": false,
  "vue3snippets.jsxSingleQuote": true,
  "workbench.editor.splitInGroupLayout": "vertical",
  "files.associations": {
    "*.vue": "vue"
  },
  "editor.fontSize": 17,
  "editor.renderControlCharacters": false,
  "editor.minimap.enabled": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "workbench.tree.indent": 16,
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.letterSpacing": 1,
  "terminal.integrated.lineHeight": 1.5,
  "emmet.triggerExpansionOnTab": true,
  "eslint.format.enable": true,
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
    ]
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true,
  },
  "javascript.format.enable": false,
  "git.autofetch": true,
  "vue3snippets.useTabs": false,
  "editor.insertSpaces": true,
  "vue3snippets.printWidth": 80,
  "html.format.wrapLineLength": 80,
  "editor.wordWrap": "on",
  "terminal.integrated.enableMultiLinePasteWarning": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "workbench.startupEditor": "none",
  "[json]": {
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace",
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
  "editor.formatOnPaste": false, // required
  "editor.formatOnType": false, // required
  "editor.formatOnSaveMode": "file", // required to format on save
  "git.terminalAuthentication": false,
  "terminal.integrated.confirmOnExit": "hasChildProcesses",
  "terminal.external.windowsExec": "D:\\Program Files\\Git\\bin\\bash.exe",
  "vue.autoInsert.dotValue": true,
  "vue.codeActions.savingTimeLimit": 2000,
  "scssFormatter.printWidth": 80,
  "vs-code-prettier-eslint.prettierLast": true,
  "vue3snippets.endOfLine": "auto",
  "scssFormatter.trailingComma": "none",
  "vue3snippets.trailingComma": "none",
  "html.format.wrapAttributes": "aligned-multiple"
}

2. 项目中配置.prettierrc 文件

    {
      "printWidth": 80, // 单行长度
      "semi": false, // 句末不适用分号
      "singleQuote": true, // 使用单引号
      "useTabs": false, // 使用空格代替tab缩进
      "tabWidth": 2, // 2个tab缩进
      "endOfLine": "auto", // 自动选择换行标识
      "trailingComma": "all", // 使用尾随逗号
      "singleAttributePerLine": false, // 是否换行取决于行长度
      "arrowParens": "avoid", // 单个参数时，不使用括号
      "proseWrap": "always", // 文本超过单行长度时，进行换行
      "htmlWhitespaceSensitivity": "ignore" // 忽略空格
    }

3. 项目中配置.eslintrc.js文件

    module.exports = {
      root: true,
      env: {
        node: true,
        'vue/setup-compiler-macros': true,
      },
      extends: [
        'plugin:vue/vue3-essential',
        'eslint:recommended',
        '@vue/typescript/recommended',
        'plugin:prettier/recommended',
      ],
      parser: 'vue-eslint-parser',
      parserOptions: {
        ecmaVersion: 2020,
        // project: './tsconfig.json', // 参考官方测试配置，解决依赖模块找不到问题
      },
      rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        '@typescript-eslint/no-non-null-assertion': 'off',
        'vue/attributes-order': 'off',
        'vue/html-closing-bracket-newline': [
          'error',
          {
            singleline: 'never',
            multiline: 'always',
          },
        ],
        'vue/require-default-prop': 'off',
        '@typescript-eslint/no-explicit-any': 'warn',
        'vue/valid-v-model': 'warn',
        'no-var': 'error', // 建议新增---要求使用let和const，不使用var
        'no-unused-vars': 'off', // eslint自带规则无法检测enum和class的构造参数,使用下一个规则
        '@typescript-eslint/no-unused-vars': ['error', { args: 'none' }],
      },
    }

4. 项目中配置.stylelintrc.cjs文件（如没有可在项目下新建此文件）

    module.exports = {
      extends: 'stylelint-config-standard',
      rules: {
        'selector-pseudo-class-no-unknown': [
          true,
          {
            ignorePseudoClasses: [
              'local',
              'global',
              'export',
              'import',
              'deep',
              'global',
              'slotted',
            ],
          },
        ],
        'rule-empty-line-before': [
          'always',
          {
            ignore: ['after-comment', 'first-nested'],
          },
        ],
      },
    }