使用ESLint+Prettier来统一前端代码风格

加分号还是不加分号？tab还是空格？你还在为代码风格与同事争论得面红耳赤吗？

正文之前，先看个段子放松一下： 去死吧！你这个异教徒！

想起自己刚入行的时候，从svn上把代码checkout下来，看到同事写的代码，大括号居然换行了。心中暗骂，这个人是不是个**，大括号为什么要换行？年轻气盛的我，居然满腔怒火，将空行一一删掉。 但是关于代码风格，我们很难区分谁对谁错，不同的人有不同偏好，唯有强制要求才能规避争论。

所以，团队关于代码风格必须遵循两个基本原则：

  1. 少数服从多数；
  2. 用工具统一风格。

本文将介绍，如何使用ESLint + Prettier来统一我们的前端代码风格。

Prettier是什么？

首先，对应ESLint大多都很熟悉，用来进行代码的校验，但是Prettier（直译过来就是"更漂亮的"

@vue/cli 构建得项目eslint配置2的更多相关文章

  1. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  2. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  3. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息（包括：development、production）

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...

  4. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  5. Vue+webpack构建一个项目

    1.安装CLI命令的工具  推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack m ...

  6. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  7. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  8. vue项目eslint配置 以及 解释

    // https://eslint.org/docs/user-guide/configuring module.exports = { root: true, parserOptions: { pa ...

  9. vue cli 构建的 webpack 项目设置多页面

    1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...

随机推荐

  1. kenlm的使用

    1.训练模型 install_path/bin/lmplz -o -S % -T /temp <text >text.arpa -o  表示n_gram 中的n(必选) -S  内存使用( ...

  2. JavaSE编程题

    Test1–取出一个字符串中字母出现的次数.如:字符串:”abcdekka27qoq”,输出格式为:a(2)b(1)k(2)… Test2–假如我们在开发一个系统时需要对员工进行建模,[员工]包含3个 ...

  3. 【Mybatis】MyBatis之Sql配置文件的使用（四）

    上一章[Mybatis]MyBatis对表执行CRUD操作(三),已经讲了基本操作,本章介绍Sql配置文件中常用功能 1.插入返回主键 2.参数值的获取方式 3.resultMap使用 插入返回主键 ...

  4. bp代码

    #电池老化率测定的神经网络模型 import tensorflow as tf import numpy as np import matplotlib.pyplot as plt import pa ...

  5. RPA基础

    RPA是什么 软件机器人 RPA是基于计算机操作系统的工作界面,自动识别UI,完成预先设定的工作流程的软件机器人 ​ 全自动 自动的操作整个工作流程,用软件的方式代替人力,完成大量的重复性的手工操作, ...

  6. 使用mobx项目开发总结（不再更新）

      mobx的优点 1,使用@observer的组件真正实现按需更新,只有监听的数据发生变化,它才会re-render,尽管父组件发生更新,但是子组件只要有@observer,则不会触发更新,类似于实 ...

  7. php方法传参

    带默认值的可以不传,function getColum($a=array(),$colum='id',$null=true,$colim2=null)这几个都可以不传,如果是:function get ...

  8. springcloud+zuul+swagger 分布式接口文档

    https://gitee.com/didispace/swagger-butler 1.引用上面项目中的swagger 工具包 2.zuul 网关配置 zuul.routes.api-apiserv ...

  9. Unity使用代码动态给按钮赋值各个状态下的图片

    一个小知识点,怕忘记,所以记录下.废话不多说,直接上代码: 未赋值之前: 使用下面代码赋值: using UnityEngine; using UnityEngine.UI; public class ...

  10. java开发师笔试面试每日12题（3）

    1.JDK和JRE的区别是什么? Java运行时环境(JRE)是将要执行Java程序的Java虚拟机.它同时也包含了执行applet需要的浏览器插件.Java开发工具包(JDK)是完整的Java软件开 ...