携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情
前端代码在开发的过程中都会有一些规范，想要做到优雅的实现代码，代码格式变得更加规范，有时需要借助一些插件或者工具，今天就来说一说前端中常用的规范化方式。
1. ESLint
ESLint是常见的代码检查工具，它可以检查代码风格以及常见的 JavaScript 代码错误
安装：
npm install -g eslint
在VScode中可以下载相关插件，Webstorm中打开settings--->eslint进行如下配置，在保存文件时可以自动进行代码检查
在项目的根目录中，可以看到.eslintrc.js文件，常见的配置文件内容如下：
2. Prettier
Prettier 在保存时，让代码直接符合 ESLint 标准。官方指路：www.prettier.cn/
Prettier可以与常用的工具和语言进行协同工作，常用的编译器 VScode、Webstorm 等都可以很好地支持，支持的语言如下：
安装
npm install --save-dev --save-exact prettier
yarn add --dev --exact prettier
在项目根目录的prettier.config.js文件中可以看到相关的配置，列举一些常用的配置项
- singleQuote: true, // 使用单引号代替双引号,默认false
- printWidth: 180, // 换行的字符长度
- trailingComma: 'all', // 所有结尾都有','号
- jsxBracketSameLine: false, // jsx > 在代码最后，单独起一行
- arrowParens: 'always', // 箭头函数只有一个参数也需要使用()号
- jsxSingleQuote: true,
- proseWrap: 'never',
- tabWidth: 4, // 指定缩进的空格数
- semi: true, // 所有末尾加分号
注：如果项目根目录下的有 editor.config 配置文件,Prettier 配置会不生效。webstorm 2020.2版本后，需要勾选如下选项：
3. SonarLint
SonarLint 是一个开源的IDE 扩展，主要进行代码的质量和安全性检查。
VScode、Webstorm 中都可以直接安装，不需要进行额外配置，打开文件后会进行自动检测。
