vscode配置在setting.json中配置eslint和prettier

vscode配置 >>> 在setting.json中配置eslint和prettier

2020-1-13 最新修改

在写vue时，属性太多不换行，但是在setting中已经配置了单行长度。
解决方案： 在 setting中加上：“prettier.configPath”:".prettierrc文件所在位置"
举例：

"prettier.configPath": "C:\\Users\\sbq_pro\\.prettierrc",

最新打 setting 配置方案如下：
注： 注释内容均可以删除，我没删除是给我做为参考内容

{
  "editor.formatOnSave": true,
  // "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue"
    ]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    // {
    //   "language": "vue",
    //   "autoFix": true
    // },
    // {
    //   "language": "html",
    //   "autoFix": true
    // }
  ],
  "eslint.run": "onSave",
  "editor.suggestSelection": "first", // 建议选择
  "workbench.iconTheme": "material-icon-theme", // 图标主题
  "workbench.colorCustomizations": { // 选中颜色
    "editor.selectionBackground": "#e29607f8"
  },
  "editor.tokenColorCustomizations": { // 注释颜色
    // "comments": "#0a0",
    // "comments": "#aa0085",
    "comments": "#82009c",
  },
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false, // 检测缩进
  // Set the default
  // "editor.formatOnSave": false, // 保存时格式化 于vue中eslint冲突
  // "terminal.integrated.fontSize": 16, // 控制台字体大小
  // "window.zoomLevel": 0, // 设置放大，扩大工作区大小
  "prettier.configPath": "C:\\Users\\sbq_pro\\.prettierrc",
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.confirmDelete": false, // 确认删除
  "explorer.confirmDragAndDrop": false,
  // 重新设定tabsize
  "editor.tabSize": 2, // tab 空格
  // "editor.fontSize": 16,
  "workbench.colorTheme": "Atom One Dark",
  "liveServer.settings.donotShowInfoMsg": true, // 浏览器实时更新插件
  // "prettier.singleQuote": true,
  // "prettier.printWidth": 80,
  // "prettier.semi": false,
  // "prettier.useTabs": true,
  // "prettier.vueIndentScriptAndStyle": true,
}

配置完成后，保存时自动会匹配eslint的校验规则，格式化代码

注释颜色：因为我这里背光，所以用亮色主题，注释颜色调深，已加注释，自行删改