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

前言

写Vue项目时，使用CLI搭建项目，勾选上ESLint+Prettier就会自动帮我们配置好，最近写的代码脱离了webpack，想规范自己的代码格式，搜了很多文章，大都是基于webpack的。

经过我一番折腾后，终于搞出了不需要webpack就能让编辑器结合ESLint对代码进行格式校验，接下来就跟大家分享下我的实现过程，欢迎各位感兴趣的开发者阅读本文。

环境搭建

本文使用的编辑器器是WebStorm，采用的包管理工具是yarn。

安装ESLint

开始之前，先跟大家看下我的项目结构，是一个很简单的js项目。

初始化一个项目

# 项目根目录执行，执行后填写相关信息，初始化成功后，项目根目录会多一个package.json文件
yarn init

安装依赖

# 项目根目录执行，执行完成后项目根目录会多一个yarn.lock文件
yarn install

安装ESLint

# 项目根目录执行
yarn add eslint --dev

初始化ESLint

# 项目根目录执行
yarn 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

yarn add typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

执行完上述步骤后，项目目录如下图所示

安装prettier

安装插件

yarn add prettier --dev

配置prettier规则，项目根目录创建.prettierrc.json文件，添加下述代码

{
  "printWidth": 160, // 每一行的代码字符
  "tabWidth": 4, // tab的长度
  "useTabs": true, // 使用tab
  "singleQuote": false, // 使用单引号代替双引号
  "semi": true, // 末尾分号
  "trailingComma": "none", // 删除数组末尾逗号
  "bracketSpacing": true // 大括号之间的空格
}

配置编辑器

配置ESLint

打开webstorm的设置面板，按照图中所示进行设置
在eslint配置文件处右击，按照图中所示进行操作

配置prettier

打开webstorm的设置面板，按照图中所示进行设置

结合ESLint与prettier

单独使用ESLint需要在其配置文件中额外配置很多规则，而这些规则又大多为prettier的默认规则或者我们已经在prettier配了一份，这样就会造成重复写的情况且维护成本较大。

幸好插件的作者已经想到了这一点，出了一个名为eslint-plugin-prettier的插件。通过下属命令进行安装

yarn add eslint-plugin-prettier --dev

打开.eslintrc.json添加prettier插件和规则rules规则

    "plugins": [
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error", // prettier标记的地方抛出错误信息
        "spaced-comment": [2,"always"] // 注释后面必须写两个空格
    }

加入上述配置后，大概可以省略如下配置:

结果测试

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

测试下自动格式化代码，如图所示写完代码后按Ctrl+S即可自动格式化

写在最后

文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊
本文首发于掘金，未经许可禁止转载💌

目录CONTENT