eslint 换行_vscode里面怎么根据eslint来格式化代码？

学会使用扩展和配置，能让你的vs code生产效率提高百分之二十。——鲁迅

泻药，最近正在奉命整理工程化和小工具。感觉搭建一个舒服的前端开发环境，选择越来越多样了。

定制化的格式化

vs code的配置文件:

按照下面这幅图操作，vs code会打开一个json配置文件。

format相关:

搜索format，你会看到很多默认的格式化配置项。

更改format配置

你可以选择想要更改的内容，复制到右边进行更改，当然，有些配置项是装好插件才会出来的。后面所说的设置配置文件都是修改右边这里哦～

安装插件:

非常简单咯，点击左侧图标，然后输入你想搜索的名字就好了。当然有些插件可能没有被官方采纳。你也可以去github上下载。

所以:

你想要一个什么样的格式化基本上都可以实现，阅读一下不同插件的github里面的readme就可以了。

ESLint格式化

如果题主认真读了ESLint的Readme的话，应该可以写出下面的配置了。不过我还是写一下好了。

安装插件：ESLint

用来格式化和提示格式错误。

设置文件类型:

设置配置:

{

"workbench.startupEditor": "welcomePage",

"editor.tabSize": 2,

"eslint.autoFixOnSave": true,

"eslint.validate": [

"javascript",

"javascriptreact",

{

"language": "html",

"autoFix": true

},

{

"language": "vue",

"autoFix": true

}

]

}

在Vue项目中的ESLint

其实在工作中，我们往往不喜欢常常去按保存键，或者在保存之前想先格式化一下再继续写。

因此，我采用了下面的方式：

安装插件：Vetur

默认自带了格式化的功能，快捷键是shift+option+f(mac)。主要用来格式化复制粘贴的代码。ESLint

在编码过程中提示格式错误，养成良好的编码习惯。

设置文件类型:

设置配置：

{

"workbench.startupEditor": "welcomePage",

"vetur.format.defaultFormatter.js": "vscode-typescript",

"javascript.format.insertSpaceBeforeFunctionParenthesis": true,

"editor.quickSuggestions": {

"strings": true

},

"editor.tabSize": 2,

"eslint.validate": [

"javascript",

"javascriptreact",

"html",

"vue",

{

"language": "html",

"autoFix": true

}

]

}

在JS中的格式化

在工作中发现Standard Style很符合ESLint的要求，因此JS的格式化就选用了这个插件。

安装插件：Javascript Standard Style

设置文件类型:

结束

vs code最舒服的是Typescript啦，题主要是有兴趣可以学习一下(或许题主是个大牛，已经在用了)。不同的编辑器都有自己最适合的场合啦，给vs code打call～