在对立代码格调这一块,通常大家都会用到ESLint。尽管 ESLint 自身具备主动格式化代码的性能,但ESLint 的次要劣势在于代码的格调查看并给出提醒,而在代码格式化这一块 Prettier 做的更加业余,因而在理论我的项目开发中咱们常常将 ESLint 联合 Prettier 一起应用。
一、装置插件
首先,咱们须要装置ESLint、Prettier插件。装置办法很简略,在VSCode的EXTENSIONS中找到ESLint插件,而后点击install就能够了。
接着,咱们再装置Prettier插件。
最初,咱们也把EditorConfig for VS Code插件装置上,这个插件能够让编译器读取配置文件,并且依照配置文件外面的规定来格式化代码,有了这个插件,只有定义好一份配置文件,就算团队成员用的编译器不同,也可能输入格调对立的代码。
二、增加配置
2.1 settings.json配置
装置好插件之后,咱们还须要设置VSCode的settings.json文件,实现保留代码时就主动执行ESLint查看。VSCode的setting.json设置分为工作区和用户两个级别,其中用户区会对所有我的项目失效,而工作区的设置只会对以后我的项目失效。
1,用户区settings.json配置
点击VSCode左下角的设置按钮,抉择Settings,抉择以文本编辑模式关上settings.json,并且在setting.json中退出以下代码。配置实现之后,当咱们保留某个文件时,就能够主动对以后文件进行ESLint查看,并且主动对一些谬误进行修复。配置如下:
{ //#每次保留的时候主动格式化 "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true},
2,工作区settings.json配置
除了配置用户区的settings.json之外,咱们也能够配置工作区的settings.json,工作区的配置只会对以后我的项目失效。首先,咱们须要在我的项目根目录创立.vscode目录,并且在该目录下创立settings.json文件。
接着,在settings.json中退出以下代码,配置实现后,当咱们保留该我的项目中某个文件时,也会主动对该文件进行ESLint查看,并且主动修复一些问题。
{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, "eslint.validate": ["typescript", "javascript", "vue"]}
2.2 EditorConfig配置
接下来,咱们看一下EditorConfig for VS Code如何配置。首先,咱们须要在我的项目根目录创立.editorconfig文件。创立实现之后,这个文件外面定义的代码标准规定会高于编译器默认的代码标准规定。
接着,咱们只须要在.editorconfig文件中退出咱们想要笼罩的编译器的配置,比方上面的配置定义了缩进为2个空格,那么就算编译器默认的是4个空格的缩进,最初也会依照咱们的.editorconfig配置,依照2个空格进行缩进
root = true[*]charset = utf-8indent_style = spaceindent_size = 2insert_final_newline = truetrim_trailing_whitespace = trueend_of_line = auto
通过下面的解决后,咱们只须要将配置保持一致,前面在【Ctrl + S】保留代码的时候,零碎就会主动帮忙修复代码格局。