使用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. Read-only file system

    mount -o remount rw /  

  2. 《修炼之道:.NET开发要点精讲》读书笔记（三）

    后几章的习题 1.异步调用开始后,什么时候才能使用异步执行的结果? A:最好在EndInvoke()方法返回之后才能使用异步执行的结果,其它时候不能保证异步调用已完成. 2.委托的异步调用开始后(即调 ...

  3. 如何为shell安装有道及更新pip.

    今天尝试安装shell下的有道翻译,提示需要安装pip. [root@mestery ~]# yum install python-pip [root@mestery ~]# sudo pip ins ...

  4. angular的一些东西

    每个人都知道在使用angular的时候只能有一个ng-app指令但是也可以手动创建,这样就可以写很多个模块 例: var app=angular.module('App',[]);var app1=a ...

  5. LeetCode —— 移动零

    给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序. 示例: 输入: [0,1,0,3,12] 输出: [1,3,12,0,0] 说明: 必须在原数组上操作, ...

  6. IDEA springboot 项目静态文件修改不更新的问题

    springboot 项目的页面和静态文件,在项目启动后,修改无效.按照下面的配置可以解决问题. 1.file-setting 勾选项目自动构建 2.使用快捷键 ctrl+ shift+ alt + ...

  7. fiddler抓包工具总结

    Fiddler 抓包工具总结 Fiddler是一个蛮好用的抓包工具,可以将网络传输发送与接受的数据包进行截获.重发.编辑.转存等操作.也可以用来检测网络安全.反正好处多多,举之不尽呀!当年学习的时候也 ...

  8. 20155205 郝博雅 Exp9 Web安全基础

    20155205 郝博雅 Exp9 Web安全基础 一.实验内容 一共做了13个题目. 1.WebGoat 输入java -jar webgoat-container-7.1-exec.jar 在浏览 ...

  9. 防范 SQL 注入攻击

     防范 SQL 注入攻击 我们执行的 SQL语句中包含变量,执行的时候会直接把变量内容替换进去.而如果攻击者在输入框中输入一些危险的字符(通常包含 SQL 注释符 --,以及其他预先精心设置的内容), ...

  10. php中测试运行的时间，从而选择得出优化程序

    对于新手来说,优化代码的习惯十分重要, 测试运行的时间,从而得出最好的一个 <?php $t1=microtime(true);   //获取程序1,开始的时间 程序1(代码...) $t2=m ...