vscode格式化eslint

之前使用 vue-cli3 本身自带有指令npm run lint，可以修复 eslint 报错的格式问题，甚至通过配置文件vue.config.js中的配置项lintOnSave来实现保存时自动格式化。对于格式化保持的代码风格，平时工作也很有用，可以通过配置编辑器实现。

安装插件

shift+command+X唤醒扩展，或者右侧插件应用商店搜索相应插件。

ESlint：javascript 代码检测工具，可以配置每次保存时格式化 js，但每次保存只格式化一点点，你得连续按住 Ctrl+S 好几次,才格式化好
vetur：可以格式化 html、标准 css（有分号、大括号的那种）、标准 js（有分号、双引号的那种）、vue 文件
Prettier - Code formatter：只关注格式化，并不具有 eslint 检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括 JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

配置 vscode

首选项 => 设置 => settings.json

{
    // 私货，比较喜欢的主题
    "workbench.colorTheme": "One Dark Pro",
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 2,
    // 每次保存的时候自动格式化
    "editor.formatOnSave": true,
    // 每次保存的时候将代码按eslint格式进行修复
    "eslint.autoFixOnSave": true,
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    // 让prettier使用eslint的代码格式进行校验，eslint6暂不兼容
    "prettier.eslintIntegration": true,
    // 去掉代码结尾的分号
    "prettier.semi": false,
    // 使用带引号替代双引号
    "prettier.singleQuote": true,
    // 让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // 按用户自身习惯选择
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // 让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
    }
}

备注

关于平时会用的html、css、js之类的，比较推荐使用插件Beautify,需要格式化的时候，直接打开查看 => 命令面板或者command+shift+P输入 beautify 即可（也可以自行配置启动命令）。

类似 vscode 配置https://www.jianshu.com/p/f15b67c94c78