VSCode Prettier + ESLint 代码规范(代码风格)

统一代码风格 并按照 eslint 规范配置

安装插件

Prettier - Code formatter - Visual Studio Marketplace

ESLint - Visual Studio Marketplace

在C:\Users目录下创建.prettierrc文件

{
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "printWidth": 160,
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "lf",
  "quoteProps": "as-needed",
  "rangeStart": 0,
  "proseWrap": "always",
  "htmlWhitespaceSensitivity": "css",
  "embeddedLanguageFormatting": "auto",
  "vueIndentScriptAndStyle": true,
  "overrides": [
    {
      "files": [
        "*.json",
        "*.yml",
        "*.yaml",
        "*.md",
        "*.markdown"
      ],
      "options": {
        "printWidth": 160,
        "tabWidth": 2,
        "useTabs": false,
        "singleQuote": false,
        "trailingComma": "none",
        "bracketSpacing": true,
        "semi": true
      }
    },
    {
      "files": [
        "*.css",
        "*.scss",
        "*.less"
      ],
      "options": {
        "singleQuote": false,
        "semi": true
      }
    },
    {
      "files": [
        "*.ts",
        "*.tsx"
      ],
      "options": {
        "singleQuote": true,
        "semi": false
      }
    },
    {
      "files": [
        "*.js",
        "*.jsx"
      ],
      "options": {
        "singleQuote": true,
        "semi": false
      }
    },
    {
      "files": [
        "*.html"
      ],
      "options": {
        "printWidth": 160,
        "tabWidth": 2,
        "useTabs": false
      }
    }
  ]
}

在vscode设置中settings.json添加

//====prettier配置=======================================
"prettier.configPath": "C:\\Users\\.prettierrc", // 格式化配置文件
// ====eslint配置========================================
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.addMissingImports": true, // 保存时自动添加缺少的imports
  "source.organizeImports": true // 保存时自动删除多余的imports
},
"eslint.lintTask.enable": true,
"eslint.format.enable": true,
"eslint.validate": [
  "javascript",
  "typescript",
  "javascriptreact",
  "typescriptreact",
  "html",
  "vue",
],
"eslint.options": {
  "configFile": "./.eslintrc.js",
  "plugins": [
    "html"
  ],
  "extensions": [
    "html",
    ".js",
    ".vue",
    ".js",
    ".vue",
    ".jsx",
    ".tsx"
  ]
},