【前端工程化】经验总结02-安装eslint插件，编辑器才会有错误提示，不能只安装prettier，eslint和prettier检测全部文件并格式化的命令，eslint和prettier的关系和区别

目录

 

1. eslint

1. 使用vscode eslint插件

2. 安装eslint包，运行eslint命令， 

3. .eslintignore 文件忽略eslint检验的文件

4. .eslintrc.js

2. eslint vs prettier

---

1. eslint

我们的项目中经常有eslint + prettier，用来规范和校验js代码，用prettier用来格式化代码

eslint负责代码质量问题，prettier负责代码风格问题，参考，一般来说这两个是缺一不可的。

1. 使用vscode eslint插件

eslint插件用来检验js错误，但是如不安装vscode的eslint插件，编辑器是不会报错的，所以记住这个一定要安装。

2. 安装eslint包，运行eslint命令， 

同时我们应该在package.json中安装 eslint插件，我们就能使用命令，来检测所有文件的eslint错误，然后点击跳转到具体文件进行改正。

命令要用npm 使用，单独的运行肯定是不行的，这也就为什么我们要安装eslint包了，就是为了能使用它的命令，来校验和格式化文件，但是我们应该知道npm的命令不能直接运行，需要在package.json的脚本中配置，否则会报错

 所以我们应该先配置脚本，再运行npm run prettier

{
  "name": "of-vue3",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173",
    "prettier": "prettier --write ./src/**/*.*"
  },
  "dependencies": {
  },
  "devDependencies": {
  }
}

但是pnpm的命令就不需要配置脚本，直接运行就好​​​​​​​

// 如果是pnpm安装的项目需要

pnpm eslint ./src/**/*.vue
pnpm eslint --fix  ./src/**/*.vue

运行pnpm eslint ./src/**/*.vue  命令后

 

 注意有时候有些错误直接运行命令--fix也无法修复，所以还是需要手动点进去一个一个修复。

3. .eslintignore 文件忽略eslint检验的文件

把不需要检验的文件加入这个文件中，vscode插件和命令就会忽略这些文件的校验

/dist
/node_modules

4. .eslintrc.js

这个文件写了各种校验规则，插件和命令是按照这个文件检验的。

同理prettier也有类似的规则，（vscode）prettier插件，（npm安装）prettier包，.prettierrc.js ， .prettierignore，运行命令npm prettier --write ./src/**/*.*  也能检验和格式化（--write参数）各种文件。

工具方法的使用，大同小异，学会一个基本上其他的也就会了。

2. eslint vs prettier

请参考这篇文章，写个很好

搞懂 ESLint 和 Prettier - 知乎我写的文章 no fancy words，绝不给你讲废话 - 鲁迅我是前端程序猿！我要写 JavaScript！ 好的，你写吧。有什么问题呢？没有问题，当只有你一个人的时候，什么问题都不是问题，只要你看的懂你自己的代码。可是呢，…https://zhuanlan.zhihu.com/p/80574300