前言
写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文档: ESLint
Prettier文档: Prettier
结果测试
随便打开一个ts文件，我们发现已经有eslint的相关提示了。
测试下自动格式化代码，如图所示写完代码后按Ctrl+S即可自动格式化
