使用ESLint+Prettier来统一前端代码风格
Prettier 简单使用
ESLint 与 Prettier配合使用
首先肯定是需要安装 prettier ,并且你的项目中已经使用了 ESLint ,有 eslintrc.js 配置文件。
npm i -D prettier
配合ESLint检测代码风格
安装插件:
npm i -D eslint-plugin-prettier
eslint-plugin-prettier 插件会调用 prettier对你的代码风格进行检查,其原理是先使用 prettier对你的代码进行格式化,然后与格式化之前的代码进行对比,如果过出现了不一致,这个地方就会被 prettier进行标记。
接下来,我们需要在 eslintrc.js 的 rules 中添加, "prettier/prettier": "error" ,表示被 prettier 标记的地方抛出错误信息。
//.eslintrc.js
{"plugins": ["prettier"],"rules": {"prettier/prettier": "error"}
}
借助ESLint的autofix功能,在保存代码的时候,自动将抛出error的地方进行fix。
如果你的eslint是直接通过cli方式启动的,那么只需要在后面加上fix即可,如: eslint --fix 。(eslint的fix功能会修改源文件!切记!!!)
如果与已存在的插件冲突怎么办
npm i -D eslint-config-prettier
通过使用eslint-config-prettier配置,能够关闭一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。使用的时候需要确保,这个配置在extends的最后一项。
//.eslintrc.js
{extends: ['standard', //使用standard做代码规范"prettier",],
}
这里有个文档,列出了会与prettier冲突的配置项。
同时使用上面两项配置
如果你同时使用了上述的两种配置,那么你可以通过如下方式,简化你的配置。
//.eslintrc.js
{"extends": ["plugin:prettier/recommended"]
}
最后贴一下我们项目中的完整配置,是在vue-cli生成的代码基础上修改的,并且使用standard做代码规范:
module.exports = {root: true,parserOptions: {parser: 'babel-eslint'},env: {browser: true,es6: true},extends: [// https://github.com/standard/standard/blob/master/docs/RULES-en.md'standard',// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.'plugin:vue/essential',"plugin:prettier/recommended",],// required to lint *.vue filesplugins: ['vue'],// add your custom rules hererules: {"prettier/prettier": "error",// allow async-await'generator-star-spacing': 'off',// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'}
}
什么?你们项目没有启用ESLint
不要慌,没有ESLint也不要怕,可以通过onchange进行代码的监听,然后自动格式化代码。只要在package.json的scripts下添加如下代码,然后使用 npm run format ,我们就能监听src目录下所有的js文件并进行格式化:
"scripts": {"format": "onchange 'src/**/*.js' -- prettier --write {{changed}}"
}
当你想格式化的文件不止js文件时,也可以添加多个文件列表。
"scripts": {"format": "onchange 'test/**/*.js' 'src/**/*.js' 'src/**/*.vue' -- prettier --write {{changed}}"
}
当然,你也能够在编辑器中配置对prettier的支持,具体支持哪些编辑器,请戳这里
使用ESLint+Prettier来统一前端代码风格相关推荐
- (IT段子)关于统一风格——使用ESLint+Prettier来统一前端代码风格
一天我路过一座桥,碰巧看见一个人想跳河自杀.我跑过去对他大喊道:"别跳,别死啊." "为什么不让我跳?"他说. "因为还有很多东西值得我们活下去啊.& ...
- eslint规范_规范统一前端代码风格
背景 众所周知,前端项目的代码质量和代码格式的校验是不可或缺的.很早之前在一个人开发的时候,脚手架生成vue项目的时候都没有打开过eslint,后面有位大佬加入,给boss说,加了个插件(eslint ...
- 使用 Eslint + husky + lint-staged + Prettier 提高前端项目质量、统一项目代码风格
使用 Eslint + husky + lint-staged + Prettier 提高前端项目质量.统一项目代码风格 Eslint 代码检查,编辑器启用 Eslint 之后,不符合规范的会自动进行 ...
- 前端架构师神技,三招统一团队代码风格
本文从代码规范,代码检查,代码格式化,以及编辑器自动化实现的方向,介绍代码规范统一在我们团队的实践应用. 大纲预览 本文介绍的内容包括以下方面: 认识代码规范 制定和统一规范 神技一:ESLint 神 ...
- vue前端代码风格指南
vue前端代码风格指南 参考网址: https://mp.weixin.qq.com/s/ejqSWUNBlADbOXbNcy6TNg 文章目录 vue前端代码风格指南 一.命名规范 1.1 项目文件 ...
- 前端通过eslint+prettier+husky统一代码风格
背景 多人协作项目,会遇到每个人都有自己的代码风格.所以需要通过工具来统一代码风格. husky是什么? 当您提交或推送时,您可以使用 husky 来检查您的提交消息.运行测试.检查代码等Husky ...
- 使用Prettier配合TsLint/Eslint 统一前端代码格式化规则,保证代码质量
背景 在开发前端项目时,每个人的开发习惯不同,用的IDE也不同,有的人喜欢用VSCode,有的人喜欢用Webstorm,而各个编译器默认的格式化规则有不一致,这就导致了不同IDE格式化出来的代码是不一 ...
- Vue 前端代码风格指南
目录 一.命名规范 1.1.项目文件命名 1.2.Vue 组件命名 1.3.代码参数命名 二.代码规范 2.1.Vue 2.2.HTML 2.3.CSS 2.4.JavaScript 三.注释规范 3 ...
- 基于 TS 的 React 模板项目,集成 eslint sass,采用 StandardJS 代码风格,包含自动注册组件等各项功能,新建项目或 React 学习必备
react-typescript-sass-standard-template 项目简介 由于 Create React App 脚手架创建的项目过于简陋,没有集成诸如 eslint 等工具,致使每次 ...
最新文章
- 试了下CommonLisp的WEB开发
- Verify the Developer App certificate for your account is trusted on your device.
- 绝了,66道并发多线程面试题汇总
- redshift 数据仓库_您如何使用Amazon Redshift Spectrum访问“暗数据”
- 数据结构与算法 完整版双链表
- ABP .Net Core 部署到IIS 问题汇总
- LA 2218 Triathlon (Geometry, Half Plane Intersection)
- java孢子进化_孢子进化论游戏
- 2021年全国电子设计竞赛题目
- 第二课:基于树莓派的10个经典项目(树莓派能做什么)
- 基于VGG的图像多标签分类算法详解及实践
- 封闭实验的对称不变性——思想实验推导狭义相对论(五)
- python输入名字、输出_Python输入输出
- 硬盘服务器与硬盘阵列,磁盘阵列和硬盘的区别是什么
- 运维必备——Zabbix监控系统
- [转]关于iOS多线程,你看我就够了
- HTML+CSS - 侧边导航栏
- XGBoost参数调优完全指南(附Python代码)
- vue el-table的合并单元格与拆分单元格
- v-model原理总结