安装ESLint
项目结构。
安装ESLint
pnpm add eslint --dev
初始化ESLint
# 项目根目录执行
pnpm eslint --init
# 执行后，会出现如下选择
# 你想如何使用ESLint，我选择第二项校验代码和解决方案
✔ How would you like to use ESLint? · problems
# 使用什么作为项目模块，我选择import/export
✔ What type of modules does your project use? · esm
# 项目使用哪个框架，我选择第三项不使用框架
✔ Which framework does your project use? · none
# 项目是否使用typescript，我选择yes
✔ Does your project use TypeScript? · No / Yes
# 代码运行环境，我选择了浏览器和node
✔ Where does your code run? · browser, node
# eslint配置文件的格式，我选择json配置格式
✔ What format do you want your config file to be in? · JSON
# 是否安装如下依赖
The config that you've selected requires the following dependencies:
@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
# 这里选择no，一会自己安装缺少的依赖
✔ Would you like to install them now with npm? · No / Yes
Successfully created .eslintrc.json file in /Users/likai/Documents/WebProject/JavaScript-test
✨ Done in 85.77s.
安装插件让ESLint支持TypeScript
pnpm add typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev
安装prettier
pnpm add prettier --dev
配置prettier规则，项目根目录创建.prettierrc.json文件，添加下述代码
{
"printWidth": 160, // 每一行的代码字符
"tabWidth": 4, // tab的长度
"useTabs": true, // 使用tab
"singleQuote": false, // 使用单引号代替双引号
"semi": true, // 末尾分号
"trailingComma": "none", // 删除数组末尾逗号
"bracketSpacing": true // 大括号之间的空格
}
配置编辑器
-
配置ESLint，一般为自动配置，如要手动配置，要选择配置文件
-
配置prettier
打开设置面板，按照图中所示进行设置，2022.3版本会自动设置
结果测试
随便打开一个ts文件，我们发现已经有eslint的相关提示了。