一、vite+vue+ts项目的配置
可以参考这篇文章,超级详细,用到了很多很多插件,我猜你一时半会肯定记不住,所以一般都是从旧项目拷贝过去。
二、简单的配置
还有一种情况,就超级简单,你想要的只是(1)用prettier来格式化,(2)需在编辑器会显示红色的报错。这种情况你唯一需要做的就是把将prettier整合进eslint。
只需要安装三个包
npm install eslint-plugin-prettier eslint prettier --save-dev
在.eslintrc.json中使用prettier
{
"extends": ["eslint:recommended", "prettier"],
"env": {
"es6": true,
"node": true
},
"rules": {
"prettier/prettier": "error"
},
"plugins": [
"prettier"
]
}
注意在eslint配置文件中extends和plugins中的区别,请参考;
.prettierrc.js中设置你喜欢的规则
module.exports = {
singleQuote: true, // 使用单引号代替双引号
printWidth: 200, // 超过最大值换行
semi: false, // 结尾不用分号
useTabs: true, // 缩进使用tab, 不使用空格
tabWidth: 4, // tab 样式宽度
bracketSpacing: true, // 对象数组, 文字间加空格 {a: 1} => { a: 1 }
arrowParens: 'avoid', // 如果可以, 自动去除括号 (x) => x 变为 x => x
proseWrap: 'preserve',
htmlWhitespaceSensitivity: 'ignore',
trailingComma: 'all',
}
这样就可以了,重点是这个包eslint-plugin-prettier,在第一种项目中也用到了这个包。
在我的一个nextjs中的项目中,也用到了这种配置基本上可以满足我的需求,网上很多其他的教程用到了更多的eslint包,当然更好。但是如果你的项目很功能很少,使用这种方法就可以, 只有在eslint.json中的extends字段不同。详细步骤请参考这篇文章。
最后如果你的编辑起还是没有红色错误提示需要
vscode安装eslint插件
重启编辑器,重启大法好
参考链接