VS Code 保存时按eslint规范格式化代码(for vue typescript)

在写Vue & TypeScript 初体验相关的示例代码时, 在VS Code保存时总能不自动格式化代码, 全部的出错都得本身手工处理(没养成良好的编码习惯), 非常麻烦, 因而想着怎么解决这个问题.

前提条件

1. VS Code插件

• ESlint, Javascript代码检测工具，能够配置每次保存时格式化js，但每次保存只格式化一点点，需连续按住屡次保存才能格式化好全部代码.
• Vetur, 可格式化html、css、js、vue文件
• Prettier - Code formatter, 只关注格式化，并不具备eslint检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown等.

2. VS Code settings.json配置

当前使用的配置是

{
    "files.autoSave": "off",
    "files.autoSaveDelay": 1000,
    "emmet.syntaxProfiles": {
      "vue-html": "html",
      "vue": "html"
    },
    
    "eslint.autoFixOnSave": true,
    "prettier.semi": true, //去掉代码结尾的分号
    "prettier.singleQuote": true, //使用带引号替代双引号
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
    "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned" //属性强制折行对齐
        }
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "html",
          "autoFix": true
        },
        {
          "language": "vue",
          "autoFix": true
        }
      ],
  "eslint.options": {
      "plugins": ["html"]
  },
     //为了符合eslint的两个空格间隔原则
    "editor.tabSize": 2,
    "eslint.enable": true,
    "workbench.colorTheme": "Solarized Light",
    "vetur.format.defaultFormatter.ts": "vscode-typescript",
    "vetur.format.defaultFormatter.css": "prettier",
    "prettier.disableLanguages": [],
    "prettier.tabWidth": 4,
    "files.associations": {
      "*.wpy": "vue"
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "breadcrumbs.enabled": true,
    "vsicons.dontShowNewVersionMessage": true
}
复制代码

3. 依赖包

需安装eslint, 不建议使用全局的方式安装, 这样没法保证项目成员全部人可以开箱即用.

yarn add eslint --dev
yarn add eslint-friendly-formatter --dev
yarn add eslint-plugin-html --dev
yarn add eslint-plugin-vue --dev
复制代码

4. 排错

若是安装好各类插件和依赖后, 依赖没法自动格式化好代码, 能够尝试如下步骤:

1. 重启VS Code
2. 从新运行本地开发服务器
3. 查看VS Code中运行的任务ESlint的输出是否有出错, 若是有, 请按提示处理. 以下图所示:

   

说明缺乏eslint-plugin-html依赖包(多是忘安装了), yarn add eslint-plugin-html --dev安装下便可.

5. 相关连接

• Vetue
• js-beautify-html