目录
3. .eslintignore 文件忽略eslint检验的文件
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
请参考这篇文章,写个很好