ESlint + VSCode自动格式化代码

本文用 Vue 项目做示范。

利用 Vue CLI 创建项目时要将 ESlint 选上，下载完依赖后，用 VSCode 打开项目。

安装插件 ESLint，然后 File -> Preference -> Settings（如果装了中文插件包应该是 文件 -> 选项 -> 设置）。

Mac是 Code -> Preference -> Settings （Code -> 首选项 -> 设置）。

搜索 eslint，点击 Edit in setting.json。

以下是我（兰玉磊）的格式化配置信息，将以下选项添加到配置文件

{
  "editor.fontSize": 13,
  "eslint.enable": true, //是否开启vscode的eslint
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }, // #每次保存的时候自动格式化
  "eslint.options": { //指定vscode的eslint所处理的文件的后缀
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
    ]
  },
  //确定校验准则
  "eslint.validate": [
    "javascript",
    "vue",
    "html"
  ],
  "files.autoSave": "onFocusChange",
  "files.associations": {
    "*.wpy": "vue",
    "*.wxml": "wxml",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.html": "html"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  //  #让prettier使用eslint的代码格式进行校验 
  "prettier.eslintIntegration": true,
  //  #去掉代码结尾的分号 
  "prettier.semi": false,
  //  #使用单引号替代双引号 
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #让vue中的js按编辑器自带的ts格式进行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "git.enableSmartCommit": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  //一定要在vutur.defaultFormatterOptions参数中设置，单独修改prettier扩展的设置是无法解决这个问题的，因为perttier默认忽略了vue文件（事实上从忽略列表移除vue也不能解决这个问题）
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // force-aligned | force-expand-multiline
      "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    },
    "prettier": {
      //  #去掉代码结尾的分号 
      "semi": false,
      //  #使用单引号替代双引号 
      "singleQuote": true
    }
  },
  // 插件KoroFileHeader
  // 文件头部注释-快捷键crtl+alt+i（window）,ctrl+cmd+t (mac)
  "fileheader.customMade": {
    "Descripttion": "",
    //"version": "",
    "Author": "voanit",
    "Date": "Do not edit",
    "LastEditors": "voanit",
    "LastEditTime": "Do not Edit"
  },
  //函数注释-快捷键ctrl+alt+t (window), ctrl+alt+t(mac)
  "fileheader.cursorMode": {
    "name": "",
    // "test": "test font",
    // "msg": "",
    "param": "",
    "return": ""
  },
  //安装live Server插件
  "liveServer.settings.donotVerifyTags": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.NoBrowser": true,
  "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
  "liveServer.settings.host": "127.0.0.1",
  "liveServer.settings.port": 5000, //设置本地服务的端口号
  "liveServer.settings.root": "/dist",
  "workbench.colorTheme": "Brackets Light Pro",
  "workbench.iconTheme": "material-icon-theme",
  "go.useLanguageServer": true,
  "tabnine.experimentalAutoImports": true,
  "explorer.confirmDelete": false,
  "kite.showWelcomeNotificationOnStartup": false,
  "vs-kubernetes": {
    "vs-kubernetes.helm-path.mac": "/Users/lanyulei/.vs-kubernetes/tools/helm/darwin-amd64/helm"
  },
  "vsicons.dontShowNewVersionMessage": true,
  "terminal.integrated.shell.osx": "/bin/bash",
  "workbench.startupEditor": "newUntitledFile",
  "eslint.codeAction.showDocumentation": {
  
    "enable": true
  }
}

配置完之后，VSCode 会根据你当前 Vue 项目下的 .eslintrc.js 文件的规则来验证和格式化代码。

PS：自动格式化代码在保存时自动触发，目前试了 JS 以及 vue 文件中的 JS 代码都没问题，html 和 vue 中的 html 和 css 无效。