简介
eslint和prettier都是用来做代码格式化的，他们其中又分为npm包和vscode插件，顺序是：先有npm包再有vscode插件
eslint限制工具
作用：
- 检查代码规范
- 变量声明是否调用
- 是否有console.log()语句
- …
用法
新建index.js文件
//index.js文件
var a = 1
let str = “ss”
console.log(‘111’);
根目录下创建 .eslintrc.js 文件
官方文档：https://eslint.nodejs.cn/
prettier格式化工具
介绍
Prettier 是一个武断的代码格式化工具，为什么说它武断呢，因为它不负责代码检查，只负责按它自己的一套规则进行格式化。而且它的格式化可配置项也很少，上手很简单。（不过实际用下来格式化的效果很不错）
它支持下面这些语言的格式化：
- JavaScript (including experimental features)
- JSX
- Angular
- Vue
- Flow
- TypeScript
- CSS, Less, and SCSS
- HTML
- Ember/Handlebars
- JSON
- GraphQL
- Markdown, including GFM and MDX
- YAML
为什么需要？
市场上开发人员每个人的代码风格不一样，我也有曾经遇到这样的场景，没有安装prettier的话，用的是vscode或者其他编译器的默认代码风格，那么就可能会导致同事之间的代码风格不一样，我在拉取同事项目的时候，保存一下，整份代码文件就会变动（因为两者使用的代码风格不一样），那你要也不太可能去commit，你commit的话同事到时候改这份文件保存了之后又会出现一样的场景，因此你只能撤回，总之所以会有prettier的存在，统一市场上开发人员的代码风格，是非常重要的。
后续查看官方文档，文档是推荐说最好不需要再另外添加其他的配置修改，因为你安装了prettier的插件之后，他有一套默认配置的代码风格属性，有特殊要求在进行更改，没有的话就进来不更改。
prettier 可以让我们在保存代码时，让我们的代码直接符合ESLint的标准
优点：
- 代码格式化
- 开箱即可用
- 集成到了编译器插件
- 保存即可格式化
使用
根目录下创建 prettier.config.js 文件
module.exports = {
// 一行最多 180 字符
printWidth: 120,
// 使用 2 个tab缩进
tabWidth: 2,
// 使用tab符缩进，false为空格缩进
useTabs: true,
// 行尾需要分号
semi: false,
// 使用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号，而使用双引号
jsxSingleQuote: false,
// 末尾不需要逗号
trailingComma: 'none',
// 大括号内的首尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号不需要换行
jsxBracketSameLine: true,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens: 'always',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf
endOfLine: 'lf',
// 缩进js跟css
vueIndentScriptAndStyle: true
}
详细配置查看官方文档：https://www.prettier.cn/docs/index.html
忽略文件
# 忽略目录或文件
build
coverage
# 忽略所有 html 文件
*.html
vscode安装prettier
在 VS Code 侧边栏找到扩展，搜索 Prettier 就可以找到 Prettier - Code formatter了，安装完后，需要在 VS Code 配置中配置默认格式化方式。
更改默认配置方法
1.鼠标右键
有什么其他意见与补充欢迎评论哈~互相学习
