乐趣区

关于前端:ESLintPrettier插件的安装与使用

jiezi

在对立代码格调这一块，通常大家都会用到 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-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = auto

通过下面的解决后，咱们只须要将配置保持一致，前面在【Ctrl + S】保留代码的时候，零碎就会主动帮忙修复代码格局。

退出移动版