使用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. Django学习笔记（进阶篇）

    Django学习笔记(进阶篇):http://www.cnblogs.com/wupeiqi/articles/5246483.html

  2. 安卓adb工具的安装方法

    adb是Android的一个很重要的调试工具,熟练掌握后可实现很多功能,比如有些手机的解锁.ROOT就会用到adb工具.可很多朋友都说不会安装,今天就从最开始的安装方法说起. adb工具其实不用安装, ...

  3. GUI学习之十——QFrame和的QAbstractScrollArea学习总结

    上一章我们学习了单行的文本框QLineEdit类,下面我们要为多行的文本框的学习坐下准备,总结一下QFrame类和QAbstractScrollArea类 一.QFrame类 1.描述 QFrame的 ...

  4. Java第4次实训作业

    编写"电费管理类"及其测试类. 第一步 编写"电费管理"类 私有属性:上月电表读数.本月电表读数 构造方法:无参.2个参数 成员方法:getXXX()方法.se ...

  5. Object.defineProperty(obj,prop,descriptor)使用

    初步实现了数据自动映射到html中,动态修改对象数据也很自动更新到html.提供addProps方法-添加新增属性并初始化自动监听代码如下: 1.abserve.js:包含数据监听实现.类似jquer ...

  6. AX_Query

    static void example(Args _args)  {      SysQueryRun     queryRun = new SysQueryRun(querystr(KTL_Sale ...

  7. 安装composer Failed to decode zlib stream 问题解决方法

    https://getcomposer.org/download/ 页面下载最新版本 composer.phar 放到php.exe 页面下.创建一个.bat文件,存入下面内容 @ECHO OFF p ...

  8. 在IIS上发布并运行ASP.NET Core

    英文原文地址:https://weblog.west-wind.com/posts/2016/Jun/06/Publishing-and-Running-ASPNET-Core-Application ...

  9. eclipse遇到启动报an error has occurred see the log file错

    错误: 修改eclipse安装目录下比如D:\eclipse\configuration\.settings\org.eclipse.ui.ide.prefs, 删除 RECENT_WORKSPACE ...

  10. DataStructs.h

    #ifndef _DATASTRUCS_H__ #define _DATASTRUCS_H__ #include <systemc.h> #include "GlobalPara ...