ESlint + VSCode自动格式化代码(2020)

更多文章

本文用 Vue 项目作示范。利用 Vue CLI 建立项目时要将 ESlint 选上，下载完依赖后，用 VSCode 打开项目。安装插件 ESLint，而后 File -> Preference -> Settings（若是装了中文插件包应该是文件 -> 选项 -> 用户），搜索 eslint，点击 Edit in setting.json 将如下选项添加到配置文件javascript

"eslint.autoFixOnSave": true,
"eslint.validate": [
    {
        "language": "vue",
        "autoFix": true
    },
    {
        "language": "html",
        "autoFix": true
    },
    {
        "language": "javascript",
        "autoFix": true
    },
    {
        "language": "typescript",
        "autoFix": true
    },
],

2020更新

因为 vscode 版本更新，以上配置已经失效，须要改成css

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

配置完以后，VSCode 会根据你当前 Vue 项目下的 .eslintrc.js 文件的规则来验证和格式化代码。 PS：自动格式化代码在保存时自动触发，目前试了 TS 和 JS 以及 vue 文件中的 JS 代码都没问题，html 和 vue 中的 html 和 css 无效。html

扩展

其实仍是有办法格式化 vue 文件中的 html 和 css 代码的，利用 vscode 自带的格式化，快捷键是 shift + alt + f，假设你当前 vscode 打开的是一个 vue 文件，按下 shift + alt + f 会提示你选择一种格式化规范，若是没提示，那就是已经有默认的格式化规范了（通常是 vetur 插件），而后 vue 文件的全部代码都会格式化，而且格式化规则还能够本身配置，以下图所示，能够根据本身的喜爱来选择格式化规则。由于以前已经设置过 eslint 的格式化规则了，因此 vue 文件只须要格式化 html 和 css 中的代码，不须要格式化 javascript 代码，咱们能够这样配置来禁止 vetur 格式化 javascript 代码：而后回到刚才的 vue 文件，随意打乱代码的格式，再按下 shift + alt + f ，会发现 html 和 css 中的代码已经格式化了，可是 javascript 的代码并没格式化。不要紧，由于已经设置了 eslint 格式化，因此只要保存，javascript 的代码也会自动格式化。vue

同理，其余类型的文件也能够这样来设置格式化规范。java