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

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

前言


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


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


环境搭建


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


安装ESLint


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


640.png


  • 初始化一个项目


# 项目根目录执行,执行后填写相关信息,初始化成功后,项目根目录会多一个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


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


640.png


安装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的设置面板,按照图中所示进行设置


640.png


  • 在eslint配置文件处右击,按照图中所示进行操作


640.png


配置prettier


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


640.png


更多配置


本文只介绍ESLint和prettier的入门使用,更多配置请移步:


ESLint文档: ESLint

Prettier文档: Prettier


结果测试


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


640.png


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


640.gif

相关文章
vscode莫名其妙的错误:eslint的语法校验规则
vscode莫名其妙的错误:eslint的语法校验规则
155 0
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
234 2
|
3天前
|
移动开发 Unix Linux
拉取代码编辑器中报错`Delete ␍ prettier/prettier` 问题的解决方案
通过正确配置Prettier、EditorConfig文件和编辑器设置,可以有效解决 `Delete ␍ prettier/prettier`的问题。这不仅能避免频繁的格式化错误,还能确保团队成员在不同开发环境下的代码风格一致,提升项目的代码质量和可维护性。按照上述解决方案调整配置后,您的项目将更加规范,代码也会更具一致性。
12 4
|
19天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
49 1
|
1月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
29 2
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
74 2
|
JavaScript 前端开发
在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
般的代码格式化工作,ESLint完全可以胜任,为什么要用Prettier代替ESLint的代码格式化功能?简而言之,Prettier的代码格式化功能比ESLint更强大,配置更简单,通过配置,ESLint可以使用Prettier的代码规则进行校验,如果不配置好,会出现冲突,导致二者不能配合使用。 下面详细介绍如何配置ESLint+Prettier在VSCode中开发Vue代码:
1362 29
在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
|
JavaScript 前端开发
ESlint + Stylelint + VSCode自动格式化代码(2023)
ESlint + Stylelint + VSCode自动格式化代码(2023)
248 0
|
JSON 数据格式
ESlint 保存自动格式化代码
第一步:在VScode下载ESlint插件,找到右下角设置图标点击扩展设置。
231 0
|
JavaScript 前端开发 开发工具
从esLint+Prettier开始格式化代码
从esLint+Prettier开始格式化代码
403 0
从esLint+Prettier开始格式化代码