使用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. jquery瀑布流排列样式代码

    <!DOCTYPE html><html><head lang="en"> <meta charset="gb2312" ...

  2. Spring Boot jsp页面无法跳转问题

    可能的情况如下: 1.未在pom.xml中添加依赖 <!-- jsp 视图支持--> <dependency>    <groupId>org.apache.tom ...

  3. Python Day 7

    阅读目录 内容回顾: 数据类型相互转换: 字符编码: ##内容回顾 #1.深浅拷贝 ls = [1, 'a', [10]] 值拷贝:直接赋值 ls1 = ls, ls中的任何值发生改变,ls1中的值都 ...

  4. etcd 增减节点

    一.查看集群节点 etcdctl --endpoint=https://10.2.0.6:2379 --ca-file=/etc/etcd/ca.pem --cert-file=/etc/etcd/c ...

  5. 2019.03.28 bzoj3322: [Scoi2013]摩托车交易（kruskal重构树+贪心）

    传送门 题意咕咕咕 思路: 先把所有可以列车通的缩成一个点,然后用新图建立kruskalkruskalkruskal重构树. 这样就可以倒着贪心模拟了. 代码: #include<bits/st ...

  6. appium解决每次运行都需要安装Unlock以及AppiumSetting的问题

    这是我用appium遇到的第三个坑?之前因为环境的问题,chromedriver驱动总是安装不对,后来发现是因为路径的原因.解决之后,现在出现新的问题,那就是“appium每次运行都要去重新安装Unl ...

  7. css样式表的知识点总结

    css总的来说有三种css样式可供选择: 1,行内样式表 行内样式表,直接写在了html文件的元素中,例如: <div style="color:red;"></ ...

  8. C++枚举类型Enum及C++11强枚举类型用法

    C++中的枚举类型常常和switch配合使用,这里用一个简单的switch控制键盘回调的代码片段来说明枚举的用法: //W A S D 前.后.左.右行走 enum Keydown{ Forward= ...

  9. 分享几个写 demo 的思路

    好久没有动笔,最近发现了一个新的写 demo 的思路,非常有意思.仔细一想,自己仿佛积累了不少写 demo 的思路和想法,总结一下,抛砖引玉. 本文所说 demo 主要分以下三种: 本地 demo 外 ...

  10. expdp错误案例

    转自:https://www.cnblogs.com/kerrycode/p/3960328.html Oracle数据泵(Data Dump)使用过程当中经常会遇到一些奇奇怪怪的错误案例,下面总结一 ...