VSCode - setting.json配置 - Prettier、Vetur格式化和ESLint检查

 vscode 前端最佳插件配置

 格式化代码时用到的插件

 ESLint（代码规范和错误检查工具）
Prettier（代码格式化工具）
Vetur（识别 vue 文件）
EditorConfig for VS Code（定义项目的编码规范，编辑器的行为会与.editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高，这在多人合作开发项目时十分有用而且必要）

{
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.activityBar.visible": true,
  "workbench.editor.showTabs": true,
  "workbench.editor.enablePreview": false,
  "workbench.editor.untitled.hint": "hidden",
  "workbench.settings.useSplitJSON": true,
  "workbench.colorTheme": "One Dark Pro Darker",
  "emmet.triggerExpansionOnTab": true,
  "emmet.showAbbreviationSuggestions": true,
  "emmet.showExpandedAbbreviation": "always",
  "emmet.includeLanguages": {
    "javascript": "html"
  },
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  // "editor.codeActionsOnSave": {
  //   "source.fixAll.eslint": true
  // },
  "editor.tabSize": 2,
  "editor.mouseWheelZoom": true,
  "liveServer.settings.port": 5500,
  "open-in-browser.default": "Chrome",
  "git.enabled": false,
  "git.ignoreWindowsGit27Warning": true,
  "vsicons.dontShowNewVersionMessage": true,
  "files.associations": {
    "*.vue": "vue",
    "*.js": "javascriptreact"
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  // "emmet.syntaxProfiles": {
  //   "javascript": "jsx",
  //   "vue": "html",
  //   "vue-html": "html"
  // },
  // "files.insertFinalNewline": true,
  // "files.trimFinalNewlines": true,
  "terminal.integrated.defaultProfile.windows": "Command Prompt",
  "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"
    },
    "Git Bash": {
      "source": "Git Bash"
    }
    // "Windows PowerShell": {
    //   "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
    // }
  },
  // ======================ESLint开始======================
  // "eslint.format.enable": true,
  // "eslint.options": {
  //   "extensions": [
  //     ".js",
  //     ".vue"
  //   ]
  // },
  // "eslint.validate": [
  //   "javascript",
  //   "javascriptreact",
  //   "vue"
  // ],
  // "eslint.workingDirectories": [
  //   ".eslintrc.js",
  //   {
  //     "mode": "auto"
  //   }
  // ],
  // "eslint.enable": true,
  // "eslint.codeAction.showDocumentation": {
  //   "enable": false
  // },
  // "eslint.run": "onType",
  // "eslint.alwaysShowStatus": true,
  // =====================ESLint结束======================
  // =====================Vetur配置开始========================
  // vue保存文件时默认格式化插件
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur",
    "editor.formatOnSave": true
  },
  // 是否验证组件的属性类型
  // "vetur.validation.templateProps": true,
  // "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 配置函数名称和小括号之间是否有空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      // 不加分号
      "semi": false,
      //用单引号
      "singleQuote": true,
      "trailingComma": "none",
      "bracketSpacing": true,
      "tabWidth": 2,
      "arrowParens": "avoid",
      "editor.tabSize": 2
    },

    "js-beautify-html": {
      // #vue组件中html代码格式化样式

      "wrap_attributes": "auto", //也可以设置为“auto”，效果会不一样
      // 换行长度
      "wrap_line_length": 250,

      "end_with_newline": false,

      "semi": false,

      "singleQuote": true
    },

    "prettyhtml": {
      "printWidth": 160,

      "singleQuote": false,

      "wrapAttributes": false,

      "sortAttributes": false
    }
  },
  // =====================Vetur配置结束========================
  // "[javascript]": {
  //   // "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  //   "editor.defaultFormatter": "vscode.typescript-language-features"
  // },
  // "[javascriptreact]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },

  // 不要有分号
  // "prettier.semi": true,
  // 使用单引号
  // "prettier.singleQuote": true,
  // 默认使用prittier作为格式化工具
  // "editor.defaultFormatter": "esbenp.prettier-vscode"
  // 不要有分号
  "prettier.semi": false,
  // 使用单引号
  "prettier.singleQuote": true,
  // 去掉结尾逗号
  "prettier.trailingComma": "none",
  // 默认使用prittier作为格式化工具
  // "editor.defaultFormatter": "esbenp.prettier-vscode"
  // "[javascript]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // }

  "editor.suggestSelection": "first",

  "explorer.confirmDelete": false,

  // "editor.tabSize": 2,

  "files.autoSave": "onFocusChange",

  "editor.fontSize": 14, // 设置字体

  "editor.tabCompletion": "on", // 用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,

    "source.organizeImports": true // 这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列
  },

  // #让vue中的js按"prettier"格式进行格式化

  "vetur.format.defaultFormatter.html": "js-beautify-html",

  "vetur.format.defaultFormatter.js": "prettier-eslint",

  "bracketPairColorizer.depreciation-notice": false,
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}