要在Vue项目中集成ESLint并且配置它不与Prettier冲突,可以按照以下步骤操作:
- 安装ESLint及其必要的插件:
npm install eslint eslint-plugin-vue --save-dev
- 创建
.eslintrc.js
配置文件,并配置ESLint规则:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
// 如果你想使用Standard JS 风格,可以取消下一行的注释
// 'standard'
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
plugins: [
'vue',
],
rules: {
// 在这里添加或覆盖规则
},
};
- 在
package.json
中添加运行ESLint的脚本:
{
"scripts": {
"lint": "eslint --ext .js,.vue src",
// 可以添加一个脚本来自动修复某些问题
"lint-fix": "eslint --fix --ext .js,.vue src"
}
}
- 确保你的VSCode编辑器安装了ESLint插件。
- 在VSCode的设置中添加以下配置以在保存时自动格式化和修复问题:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
完成以上步骤后,你可以通过运行npm run lint
来手动检查代码问题,运行npm run lint-fix
来自动修复一些可修复的问题。VSCode编辑器将在每次保存文件时自动运行ESLint进行格式化和问题提示。