使用ESLint+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是直接通过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 files
plugins: [
'vue'
],
// add your custom rules here
rules: {
"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来统一前端代码风格的更多相关文章
- VSCode 使用 ESLint + Prettier 来统一 JS 代码
环境: VSCode 1.33.1 Node.js 8.9.1 一.ESLint 1.介绍 ESLint是最流行的JavaScript Linter. Linter 是检查代码风格/错误的小工具.其他 ...
- ESLint + Prettier + husky + lint-staged 规范统一前端代码风格
写在前面: ESLint: Find and fix problems in your JavaScript code. Prettier: Prettier is an opinionated co ...
- eslint+prettier+husky+lint-staged 统一前端代码规范
eslint+prettier+husky+lint-staged 统一前端代码规范 遵循编码规范和使用语法检测,可以很好的提高代码的可读性,可维护性,并有效的减少一些编码错误. 1.终极目标 团队中 ...
- 在vscode中使用eslint+prettier格式化vue项目代码 (转载)
ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...
- 团队协作统一vue代码风格,vscode做vue项目时的一些配置
1. 安装Vetur 扩展 主要是用于让vscode能识别vue文件,对vue代码进行高丽处理,并且它内置了一些代码格式化的设置 2. 安装ESLint 如果你的项目已经开启了eslint规范, 再有 ...
- VS Code 自动修改和保存 代码风格 == eslint+prettier
最近因为用到VS Code,需要统一所有人的代码风格(前端语言js/html/css等,或者后端语言 go/python等也可以这么用). 所以参考了一些网络资料,记录下设置步骤,以便后续查阅. St ...
- Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南
Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...
- Visual Studio Code 使用 ESLint 增强代码风格检查
前言 在团队协作开发中,为了统一代码风格,避免一些低级错误,应该设有团队成员统一遵守的编码规范.很多语言都提供了Lint工具来实现这样的功能,JavaScript也有类似的工具:ESLint.除了可以 ...
- Django之代码风格
1 代码风格 稍微关注一下下面这些代码标准风格指导规则将会对你大有益处,我们高度建议你通读词章,即便你此时可能正想跳过它. 1.1 让你的代码保持可读性的重要性 代码在读方面的重要性胜过写.一个代码块 ...
随机推荐
- Java高级项目实战02:客户关系管理系统CRM系统模块分析与介绍
本文承接上一篇:Java高级项目实战之CRM系统01:CRM系统概念和分类.企业项目开发流程 先来CRM系统结构图: 每个模块作用介绍如下: 1.营销管理 营销机会管理:针对企业中客户的质询需求所建立 ...
- VSTO开发指南(VB2013版) 第四章 Excel编程
实例1:处理NewWorkbook和WorkSheet事件的控制台程序 书本第70页 程序清单 4.1 处理NewWorkbook和WorkSheet事件的控制台程序 Imports Excel = ...
- JS对象的概念、声明方式等及js中的继承与封装
对象的遍历 对象可以当做数组处理,使用for in var person={}; person.name="cyy"; person.age=25; person.infos=fu ...
- Android开发当中ListView的使用
首先我们看ListView实现之后的的效果,如下图所示: 现在我们来看看如何来实现这个可以进行上下活动的ListView: 首先是主界面Activity_Main.xml的代码: <?xml v ...
- 刷题84. Largest Rectangle in Histogram
一.题目说明 题目84. Largest Rectangle in Histogram,给定n个非负整数(每个柱子宽度为1)形成柱状图,求该图的最大面积.题目难度是Hard! 二.我的解答 这是一个 ...
- 【WPF学习】第十八章 多点触控输入
多点触控(multi-touch)是通过触摸屏幕与应用程序进行交互的一种方式.多点触控输入和更传统的基于笔(pen-based)的输入的区别是多点触控识别手势(gesture)——用户可移动多根手指以 ...
- BloodHound可视化之域分析
一.简介 BloodHound是一款将域内信息可视化的单页的web应用程序,是一款在域内进行信息收集的免费工具: bloodhound通过图与线的形式,将域内用户.计算机.组.会话.ACL以及域内所有 ...
- Elasticsearch分布式架构
Reference 1. http://solutionhacker.com/elasticsearch-architecture-overview/ 2. https://github.com/ba ...
- java 开发中 dom4j的简单用法
Java中处理XML的方式有很多种,个人任务dom4j还是比较好用的.下面介绍以下简单的使用方法 先把import补充上 import org.dom4j.Document; import org.d ...
- 全面了解Java中的15种锁概念及机制!
在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类.介绍的内容如下: 1.公平锁 / 非公平锁 2.可重入锁 / 不可重入锁 3.独享锁 / 共享锁 4.互斥锁 / 读 ...