侧边栏壁纸
博主头像
xuesheng博主等级

分享web知识,学习就是取悦自己!

  • 累计撰写 118 篇文章
  • 累计创建 14 个标签
  • 累计收到 3 条评论

目 录CONTENT

文章目录

独立使用ESLint+Prettier对代码进行格式校验

xuesheng
2022-10-17 / 0 评论 / 0 点赞 / 227 阅读 / 490 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-11-02,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

安装ESLint

项目结构。

image-1665990319788

安装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,一般为自动配置,如要手动配置,要选择配置文件
    image-1665990779595

  • 配置prettier
    打开设置面板,按照图中所示进行设置,2022.3版本会自动设置

image-1665990896855

结果测试

image-1665991242163
随便打开一个ts文件,我们发现已经有eslint的相关提示了。

0

评论区