vscode 代码保存时自动格式化成 ESLint 风格

vscode 的默认的代码格式化 alt+shift+f (windows) 没法经过 eslint 的代码风格检查,,,javascript

好比:html

  • 4个空格和2个空格(ESLint)
  • 字符串用单引号(ESLint)

这样在进行vue项目开发的时候,使用 eslint 代码风格检查就会报错:vue

image

image

因此须要在保存的时候,使 vscode 代码自动格式化成 eslint 风格的代码,而且支持在 html 和 vue 中的代码;java

首先装下 ESlint 插件react

image

而后配置项:文件 -> 首选项 -> 设置,加上下面设置:windows


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

eslint.autoFixOnSave 用来进行保存时自动格式化,可是默认只支持 javascript .js 文件spa

eslint.validate 用来配置做用的文件类型。插件

  • eslint插件的配置说明中,直接写的是"eslint.validate": [ "javascript", "javascriptreact", "html" ],所以我想固然一开始写的是"eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ],结果是不起做用的,必需要写成上面那样;
  • autoFixOnSave 对于 .vue 文件,自动保存时(我是失焦保存)不会 autoFix ,必需要手动保存 ctrl+s 才会 autoFix;对于 .js 文件,我失焦保存后,会 autoFix;不过对于一些没法 autoFix 的,是不会 autoFix 的(譬如:多余的分号会去掉,4个空格变2个,可是语法错误仍是会放那边);

参考文档:3d

http://www.ptbird.cn/vscode-autosave-eslint-support-vue.htmleslint

相关文章
相关标签/搜索