【前端工程化】超简单的使用eslint+prettier配置方法

一、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字段不同。详细步骤请参考这篇文章。

最后如果你的编辑起还是没有红色错误提示需要

1. vscode安装eslint插件

2. 重启编辑器，重启大法好

参考链接

https://cloud.tencent.com/developer/article/1840432