您的位置:新葡亰496net > 新葡亰官网 > 在js开发前需要的东西,技能树点亮计划

在js开发前需要的东西,技能树点亮计划

发布时间:2019-09-11 10:46编辑:新葡亰官网浏览(105)

    梳理前端开拓使用eslint和prettier来检查和格式化代码难点

    2018/06/11 · JavaScript · 格式化

    原稿出处: Edwin   


    1. 前言

    俗话说,无规矩不成方圆,工欲善其事必先利其器。

    在拓宽前端职业快2年时间了,即便日常写代码会写注释,不过并未太符合规范,纵然很已经知道能够用eslint来规范代码,还应该有editorconfig来约束代码风格,可是在日常干活中并从未严酷依据这个来做。

    直到公司来了一个新同事把那事提了出来,并在公司中推广。当三个集体慢慢变大时,很有不能缺少统一代码风格和标准。

    对于写前端js代码,这里推荐vscode,本文介绍的插件相关的也是vscode的

    小编简单介绍:ASCE1885, 《Android 高档晋级》作者。

    @author ASCE1885的 Github 简书 微博 CSDN 知乎
    正文由于隐秘的生意指标,不开放全文转发许可,感激!

    一、难题痛点

    • 在团队的项目成本进度中,代码维护所占的年月比重往往超越新职能的支付。因而编写符合集团编码标准的代码是首要的,这样做既可以够不小程度地制止基本语法错误,也确认保障了代码的可读性。
    • 对于代码版本管理体系(svn 和 git只怕别的),代码格式分化带来的难点是严重的,在代码一致的境况下,因为格式区别,触发了版本管理体系标志为 diff,导致无可奈何检查代码和校验。

    唯独急需知道的是,开辟规范不止包罗代码格式标准,还应该有相当多内容,这里只是独自说清代码格式化标准而已。

    title: 使用eslint和editorconfig标准代码
    date: 2018-01-17
    tags: [eslint]
    categories: 境况布置

    2. 代码注释标准

    • 微信民众号:asce1885
    • 小密圈:Android高档进级,详细情形见这篇小说。
    • Github,简书,微博,CSDN 知乎

    图片 1

    (一)关于代码格式规范难题

    代码格式标准的正规能够参照他事他说加以考察各大主流集团和社区,以下都以局地常用主流标准:

    • 前端开采标准之命名标准、html标准、css标准、js规范 – TencentWeb前端 IMWeb 团队社区 | blog | 团队博客 腾讯的
    • 编写制定「可读」代码的进行 | 天猫 FED | 天猫商城前端共青团和少先队 淘宝的
    • GitHub – airbnb/javascript: JavaScript Style Guide airbnb 的
    • google 的
    • vue 的

    参照外人的正经,制定切合自身组织选择的规范,太过复杂的标准施行起来太难为,太过轻松的科班不及没有正式。

    不曾断然的正统,唯有切合的标准!


    2.1 文件最初

    对此新建贰个文件,有要求写明开辟者是哪个人,注解,好让外人或许同事知道那是哪个人开辟的,有题目能高效稳定。对于注脚开荒者信息的插件,这里介绍二个vscode-fileheader,在vscode上下载安装后,就足以自个儿安排一下,来飞快变动作者音信,在插件下载页面有详细的牵线怎么样行使。效果如下图:

    图片 2

    image.png

    图片 3

    onepiece.png-1377.3kB

    (二)关于为啥要用 eslint 和 prettier难点

    • prettier 首如若为了格式化代码,而在未曾 prettier 此前,是用 eslint —fix和 编辑器自带代码格式来进展代码格式化的。
      • 劣势:各类编辑器会有不均等的代码格式,並且配置会比较麻烦。
      • prettier 已经稳步变为产业界主流的代码风格格式化工具。
      • 缓慢解决 eslint 等工具的校验准则,因为将代码样式校验交给了 prettier,所以能够将代码校验的平整改良确地利用到代码真正的正规地点。
    • eslint 是首要依旧肩负代码法规校验,prettier 只调解代码风格,代码样式,eslint 才是确实反省代码是或不是符合标准的工具。

    故而双方是急需合营使用的。

    选取eslint和editorconfig标准代码

    该作品总括自:慕课网: Webpack React全栈工程架构项目实战精讲

    参考:
    vue项目配置eslint(附visio studio code配置)

    VS Code里面怎么依据eslint来格式化代码?-刘祺的应对

    VS Code中的插件以及相关配置

    2.2 代码注释规范

    累加须要的笺注,对贰个有义务心、有道德轨范的前端必得怀有的好习贯,能够大大提升代码的可维护性、可读性。
    率先纯熟一下html、css、js的注明的写法:
    1、HTML注释语法:

    <!--注释的内容-->
    

    2、css注释语法

    /* 注释内容 */
    /* ----------文字样式开始---------- */
    

    3、javaScript注释

    //注释内容
    /*注释内容*/
    

    接下去是对注释在这两种代码中使用的职位,如何写注释举行总结一下。(依照个体的习惯可能不等同)

    1、html注释
    使用的岗位:
    1)一般会动用在一些第4节点标签停止的前边,如:

    <div class="wrap">
    <div class="main">
    ...
    </div><!--main end-->
    <div><!--wrap end-->
    

    2)使用在一些巡回的利落的后面,如:

    <ul class="list">
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
    </ul><!--list loop-->
    

    这一切都以为了程序在嵌套的时候越是方便、明了。方便了别人相同的时候也就低价了温馨。程序嵌套的很乱,到时要你去修改那也是一份挺复杂的工序。

    2、css注释
    一般会利用在概念有个别模块样式的顶部,表达这段样式是作用于哪段模块,如:

    /*通用 - 评论*/
    .comment{...}
    /*相册*/
    .photo{...}
    /*分享*/
    .share{...}
    /*投票*/
    .vote{...}
    

    3、javascript注释
    当前剧本、样式的注释格式都有四个曾经成文的预约标准,最早是YUI Compressor拟定。

    /**
    * 这里的注释内容【会】被压缩工具压缩
    */
    
    /*!
    * 这里的注释内容【不会】被压缩工具压缩
    * 与上面一个注释块不同的是,第2个*换成了!
    */
    

    内部聊起这里提起的压缩工具备YUI Compressor 、Google Closure Compiler、gulp-uglify、grunt-contrib-uglify等,那么些压缩工具都帮助上述的削减约定。平日把文件的关键新闻放在第2种注释内容里,如文件名称、版本号、作者等。

    有关那么些首要信息,都由局部珍视词和一定的格式来书写。关键词书写格式为:

    /**
    * @author ydr.me
    * @version 1.0
    */
    

    行使@key desc格式来书写,常用的重要性词有:

    关键词 描述
    @auhor 作者
    @param 参数
    @example 示例
    @link 链接
    @namespace 命名空间
    @requires 依赖模块
    @return 返回值
    @version 版本号

    中间,param关键词的格式为:

    /**
    * @param {String} 参数描述
    */
    

    常用的js 函数注释比如

    /**
     * 函数功能
     * @param 参数
     * @return 返回值
     */
    

    终极,注释也是字符也是会有流量爆发。由此当页面公布到专门的职业地址的时候,最佳增加一步优化流程。
    缩减进程为非逆进程,保证本地是流行的相同的时间蕴藏注释的公文,压缩后上传服务器。服务器端的文件不可用作本地调节和测量试验用。那几个,将来的包裹工具都得以消除。

    cat.png

    广而告之时间:作者的新书《Android 高档进阶》(https://item.jd.com/10821975932.html )在京东起先预售了,招待订购!

    二、化解办法

    旧有的化解办法是:

    • 采纳 editorconfig 帮助同盟开荒工具的代码格式化。
    • 选择 eslint 检查代码
    • 使用 eslint —fix来修补不符合 eslint 法则的代码,它会活动依照设置的条条框框来更换代码(它会含有代码样式的平整,然而eslint 的体制法规并不太准确)。
    • 手动修改剩下的反常的地点,或然稍微地点很难用准绳来剖断的时候,就须求手动修改。

    新的消除办法是:

    • 利用 editorconfig 协理同盟开采工具的代码格式化。
    • 动用 eslint 检查代码。
    • 利用 prettier 格式化代码。(能够精通为prettier是 eslint —fix 的加强版,用 prettier 来替代 eslint-fix
    • 手动修改剩下的格外的地点,或然稍微地方很难用准则来推断的时候,就要求手动修改。

    咋一看,其实没啥差异,以至大概发掘新化解办法会特别费力了有个别,其实步骤上确实如此,可是的确操作上,会缓慢化解eslint 的平整编写,也会回退过多手动修改样式的地方,格式化后的代码会愈发赏心悦目,耐看。

    干什么要选拔这个

    1. 行业内部代码有助于团队同盟
    2. 纯手工业标准费时费劲且不能够确认保证正确性
    3. 能相称编辑器自动唤醒错误,进步开采功用

    3. editorconfig

    editorConfig不是怎么样软件,而是三个名号为.editorconfig的自定义文件。该文件用来定义项目标编码标准,编辑器的一言一行会与.editorconfig 文件中定义的一致,并且其事先级比编辑器本人的装置要高,那在几个人合营开拓项目时十二分有用何况供给

    稍微编辑器暗许协理editorConfig,如webstorm;而有一点点编辑器则需求安装editorConfig插件,如ATOM、Sublime、VS Code等

    当张开三个文本时,EditorConfig插件会在开荒文件的目录和其每超级父目录查找.editorconfig文件,直到有三个安排文件root=true

    EditorConfig的布局文件是从上往下读取的还要如今的EditorConfig配置文件会被第一读取. 相配艾德itorConfig配置文件中的配置项会依据读取顺序被应用, 所以近来的安顿文件中的配置项具备优先权

    假使.editorconfig文件并未有进行一些配置,则选择编辑器私下认可的安装

    常用的配备为:

    root = true
    
    [*]
    indent_style = tab
    indent_size = 2
    charset = utf-8
    trim_trailing_whitespace = true
    insert_final_newline = true
    end_of_line = lf
    # editorconfig-tools is unable to ignore longs strings or urls
    max_line_length = 120
    

    vscode 插件 EditorConfig for VS Code

    在《作者的 React Native 技能树点亮安排 の React Native 开荒 IDE 选型和配备》 和 《最棒用的 Visual Studio Code 本性和插件》 这两篇小说中,大家对 Visual Studio Code 的性状和在 React Native 中的轻松陈设有了一定的询问,但针对 React Native 开辟来说,还非常不够详细,本文就来详细探寻怎么着越来越好的为 React Natiev 开垦定制 VSCode。

    图片 4

    三、具体操作

    由于网络小说证实的对比混乱,这里最首若是为了梳理整个流程和思路。

    eslint

    4. eslint

    在React Babel Webpack意况中央银行使ESLint
    常用的陈设

    {
        'root': true,
        'parser': 'babel-eslint',
        'extends': ['standard', 'plugin:react/recommended'],
        'parserOptions': {
            'ecmaVersion': 6,
            'sourceType': 'module',
            'ecmaFeatures': {
                'jsx': true,
                'experimentalObjectRestSpread': true,
                'impliedStrict': true
            }
        },
        'env': {
            'browser': true,
            'node': true,
            'es6': true
        },
        'plugins': ['import', 'react'],
        'rules': {
            'no-console': ['error', {'allow': ['warn', 'error']}], // 禁止conosle 允许console.warn, console.error
            'no-alert': 'error',                                      // 禁止alert, promp, confirm
            'no-empty': ['error', {'allowEmptyCatch': true}],       // 禁止空代码块(catch除外)
            'no-extra-semi': 'error',                                 // 禁止不必要的分号
            'default-case': 'error',                                  // switch语句必须有default
            'dot-notation': 'error',                                  // 尽可能使用点号
            'no-else-return': 'error',                                // 禁止 if 语句中 return 语句之后有 else 块
            'no-empty-function': 'error',                             // 禁止出现空函数
            'radix': 'error',                                         // 强制在parseInt()使用基数参数
            'semi': ['error', 'always'],
            'quotes': ['error', 'single'],
            'indent': ['error', 'tab'],
            'no-tabs': 'off',
            'one-var': 'off',
            'no-mixed-spaces-and-tabs': ['off', 'smart-tabs'],
            'no-extra-parens': 'warn',
            'no-template-curly-in-string': 'off',
            'key-spacing': ['warn', {'beforeColon': false, 'afterColon': true}],
            'keyword-spacing': ['warn', {'before': true, 'after': true}],
            'no-multi-spaces': ['warn', {'ignoreEOLComments': true}],
            'spaced-comment': 'off',
            'comma-dangle': 'off',
            'react/display-name': 'off',
            'react/prop-types': ['warn', {ignore: ['match', 'location', 'history']}],
            'react/self-closing-comp': ['error', {'component': true}],
            'import/no-webpack-loader-syntax': 'off'
        }
    }
    

    越多关于eslint 的剧情能够看React Babel Webpack

    vscode 插件 ESLint

    React Native Tools[[1]](https://www.jianshu.com/p/caa802ee055b#fn1)

    图片 5

    MacHi 2017-05-01 18-38-52.png

    微软官方为 React Native 开辟提供的特其余插件,依照官方网站的辨证实行插件的装置就可以。那个插件使得开荒者能够在 VS Code 中调和 React Native 代码,飞快施行 react-native 命令,以及对 React Native 的 API 具有智能提示功效,如下所示:

    图片 6

    image_1ardliff01st41t5u19op1pgif129.png-153.7kB

    TB2MnqlXH1J.eBjSszcXXbFzVXa_!!1020536390.png-39kB

    大纲

    1. 合併团队采取的开垦工具(webstorm,ide 编辑器)
    2. 安装 eslint 和 prettier (node 模块)
    3. 设置 eslint 和 prettier ( ide 编辑器的插件)
    4. 配置 eslint 和 prettier
    5. 配置 editorconfig (可选)
    6. 严加监察和控制,依据流程检查和格式化代码,依据规范和要求开展代码提交。

    此处多了一步是设置 eslint 和 prettier ( ide 编辑器的插件),紧要正是选取 ide 编辑器做代码格式错误提示和代码格式管理,这么些操作也得以使用 webpack 打包的时候来做,也能够利用 gulp 恐怕 npm 来做,但此处借助理编辑辑器会更方便。

    eslint是什么

    在js开发前需要的东西,技能树点亮计划。elint是随着ECMAScript版本向来更新的Js lint工具,插件丰裕,况且能够套用规范,法规非常丰裕,能够满意大多数协会的必要。

    5. 连锁作品

    1. Visual Studio Code 编辑器使用
    2. 在React Babel Webpack意况中动用ESLint
    3. 编码标准

    原稿地址: 在js开拓前须要的东西(标准)

    Flow Language Support[[2]](https://www.jianshu.com/p/caa802ee055b#fn2)

    图片 7

    MacHi 2017-05-01 18-42-22.png

    Flow[[3]](https://www.jianshu.com/p/caa802ee055b#fn3) 是 推文(Tweet) 出品的二个用以 JavaScript 代码静态类型检查的工具,能够用来发现Javascript 代码中的类型错误。这一个插件是在 VS Code 中扶助 Flow 的插件,当然前提是设置好 Flow。

    在本种类前边一篇小说《React Native 开拓 IDE 选型和布局》[[1]](https://www.jianshu.com/p/270106f66c46#fn1)中大家介绍了 React Native 开采中只怕用到的三款 IDE,以及如何布署以常规显示 React Native 语法和贯彻代码的智能提示。在事实上项目花费中,关于 IDE 大概说工程的布局远不仅前文所介绍的,极度是在团队开荒中,还会有比相当多的公物配置要求制定,在那之中代码风格统一工具 EditorConfig 和静态代码检查工具 ESLint 是必须的。限于篇幅,本文先来介绍 EditorConfig,后边再起一篇作品专门来介绍 ESLint。

    (一)统一团队选拔的开垦工具(webstorm,ide 编辑器)

    开采工具可以做过多事物,是支付代码的利器,可是分歧的开拓工具会有例外的代码提醒,代码格式化,代码检查的编写制定,那样的差距化会对集团代码标准(开辟和检讨)带来众多难点,所以需求联合。

    理之当然,假设个人不愿意退换自个儿用惯的开拓工具的话,也没提到,只要能够一挥而就跟团队的开荒标准保持一致也是能够的,但个体会认识为,这样难度十分的大,毕竟开拓工具和团体的付出标准不那么轻松融合。

    此间只表明前端产业界最近最常用的开采工具来做例子 webstorm 。

    eslint的使用

    1. 大局安装eslint及其信赖
    npm i eslint -g
    
    npm i babel-eslint 
    eslint-config-airbnb 
    eslint-loader 
    eslint-plugin-import 
    eslint-plugin-jsx-a11y 
    eslint-plugin-node 
    eslint-plugin-promise 
    eslint-plugin-react -g
    
    1. 在项目中安装eslint及其依赖
    npm i eslint -D
    
    npm i babel-eslint 
    eslint-config-airbnb 
    eslint-loader 
    eslint-plugin-import 
    eslint-plugin-jsx-a11y 
    eslint-plugin-node 
    eslint-plugin-promise 
    eslint-plugin-react -D
    
    1. 在品种根目录下新建 .eslintrc 文件,如下图所示:

    图片 8

    .eslintrc文件

    1. 编辑法则
    {
      "parser": "babel-eslint", // 使用babel-eslint而非eslint自带的parser
      "env": {
        "browser": true,        // 代码执行环境: 浏览器 可以使用window的环境变量
        "es6": true,
        "node": true            // 可以使用node的一些环境变量
      },
      "parserOptions": {
        "ecmaVersion": 6,       // ecma语言版本
        "sourceType": "module"
      },
      "extends": "airbnb",      // 继承airbnb规范
      "rules": {
        "semi": [0],             // 不检测分号 0 = off, 1 = warn, 2 = error
        "react/jsx-filename-extension": [0] // 允许在js文件中编写jsx
      }
    }
    
    1. 配置webpack
    {
      enforce: 'pre',           // 在webpack编译之前进行检测
      test: /.(js|jsx)$/,
      loader: 'eslint-loader',
      exclude: [                // 除去node_modules
        path.resolve(__dirname, '../node_modules')
      ]
    },
    
    1. 启航webpack,你就能意识一大堆报错音信

    图片 9

    报错新闻

    八个一个找呢,考验耐心的时刻,原本本人性情这么好 :P

    只要不通晓不当是何许看头,看见报错前面包车型的士浅灰字体吗,那多少个便是平整名,copy一下去eslint rule翻开法规实际情况。

    ESLint[[4]](https://www.jianshu.com/p/caa802ee055b#fn4)

    图片 10

    MacHi 2017-05-01 18-41-40.png

    静态代码检查入眼用来对代码的编制程序标准,语法错误等进行围观,进而在代码施行从前开掘大概存在的主题材料。在程序设计领域,大致各个语言都有配套的静态代码检查工具,举个例子C 和 C 语言的 PC-lint[[5]](https://www.jianshu.com/p/caa802ee055b#fn5) 和 FlexeLint[[6]](https://www.jianshu.com/p/caa802ee055b#fn6),Java 语言的 FindBugs[[7]](https://www.jianshu.com/p/caa802ee055b#fn7),Android 开荒中的 Android Lint,iOS 开垦中的 OClint[[8]](https://www.jianshu.com/p/caa802ee055b#fn8) 等等。React Native 开垦中山高校部时间都以应用的 Javascript 语言,类似其余语言,Javascript 也可以有自己的静态代码检查工具,而其间前段时间利用最广的正是ESLint,那么些插件正是将 ESLint 集成进 VS Code 的插件,当然前提是索要安装好 ESLint[[9]](https://www.jianshu.com/p/caa802ee055b#fn9)

    前文中大家最后建议组织成本中最棒保证 IDE 的会面,但优质很充实,现实中却因为公司成员所了解的编辑器恐怕 IDE 分明不是平等的,因而我们也不佳也没须求限制大家使用统一的 IDE。那样一来怎么样缓解由于使用分裂的编辑器也许 IDE 恐怕引致的代码风格不平等问题啊?比如不一致的 IDE 的缩实行数和行末空格等是不雷同的,那时就轮到 EditorConfig 出场了!

    (二)安装 eslint 和 prettier (node 模块)

    安装那些模块的含义在于,实际上,整个流程最宗旨正是以此地点,开拓工具就算支持了那2个模块,然则末了运营是必须求以那2个模块安装好技巧利用的。

    JavaScript

    // 这里供给全局安装最关键的多个node 模块,主假设要让 ide 编辑器能够读取全局意况来调用那2个模块 npm install eslint prettier -g --save-dev // 这一个是为着 eslint 跟 prettier 能够一并使用 npm install --save-dev eslint-plugin-prettier // 那么些是为了让 eslint 跟 prettier 包容,关闭 prettier 跟 eslint 冲突的rules npm install --save-dev eslint-config-prettier

    1
    2
    3
    4
    5
    6
    7
    // 这里需要全局安装最主要的两个node 模块,主要是要让 ide 编辑器能够读取全局环境来调用这2个模块
    npm install eslint prettier -g --save-dev
     
    // 这个是为了 eslint 跟 prettier 可以联合使用
    npm install --save-dev eslint-plugin-prettier
    // 这个是为了让 eslint 跟 prettier 兼容,关闭 prettier 跟 eslint 冲突的rules
    npm install --save-dev eslint-config-prettier

    补给备注:

    • eslint-config-prettier :
      • 这么些插件是若是eslint的准绳和prettier的平整暴发抵触的时候(首倘若不须求的冲突),举个例子eslint 限制了总得单引号,prettier也限制了亟须单引号,那么一旦用 eslint 驱动 prettier 来做代码检查的话,就能够唤起2种报错,尽管他们都针对同一种代码错误,这年就能由那一个插件来关闭掉额外的报错。
      • 但借使是eslint 只负担检测代码,prettier 只担当格式化代码,那么他们中间互不搅扰,也正是说,也是能够不安装这几个插件的,不过因为集团的人口的差别性(固然同二个开拓工具也会有版本差别,也可能有应用 prettier 和 eslint 的歧异),大概有存在种种意况,所以最佳可能安装上那一个插件。
      • 官方有详细介绍:GitHub – prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

    模块参谋音讯:Integrating with ESLint · Prettier

    以下顺便说一下任何大家常用到的eslint 模块:

    JavaScript

    npm -g install babel-eslint eslint-plugin-html --save-dev

    1
    npm -g install babel-eslint eslint-plugin-html --save-dev
    • babel-eslint :
      • 多少代码是没被 eslint 协助的(因为 babel 也是负责这种事情,转译不被援助的 js 语法),所以须要加多这些插件来保证包容性。
      • 法定有详尽介绍:
    • eslint-plugin-html:
      • 为了让eslint 能够检查.vue文件的代码。

    配置调整台的eslint检查实验条件

    万一你想在调整台查看项目中有着的warning 和 error,即手动在调控台通过eslint命令进行代码检验,就需求确定保证依赖包都在全局境况目录下安装。

    下一场施行

    eslint --ext .js --ext .jsx client/
    

    命令就能够。

    --ext用来钦点检测的文件格式,client/是检验的目录。

    也足以给该指令提供二个越来越好记的别名,编辑package.json,在script属性中新扩充一条。就能够通过 npm run lint来检查评定体系中的warning 和 error了。

    "scripts": {
       "lint": "eslint --ext .js --ext .jsx client/"
     },
    

    哪些给项目配置eslint到此处就讲完了,最终说下问什么要在大局情况下安装重视包吗。

    只有大局遭受下安装了eslint工夫进行 eslint --init 和 eslint --ext .js,.vue src 等eslint指令。
    当项目执行eslint检查评按时,会先检查实验全局情状下有未有eslint,显明作品第一步就是在全局安装了,那么全局情况下的eslint援用看重包时也只会在大局意况下搜寻。
    一经你今后或之后无需给项目开头化三个eslint配置,也没有须求在支配台出口全数的warning和error,那么就绝不全局情状下的eslint。实践npm configs 查看全局境况下的包的设置路线,借使开采有eslint就删掉好了。
    [这一段摘自简书]

    上面文章中切磋有一个人朋友钻探:“eslint不必然须要全局安装
    地面安装的话可以通过./node_modules/.bin/eslint --init来运行”

    不情愿全局安装好多借助包的同窗能够一试。

    注:上边是指命令行运营eslint。假诺通过npm scripts运维eslint,无需全局安装,命令也无需增多路线前缀,npm会自动找寻本地品种注重eslint

    Prettier - JavaScript formatter[[10]](https://www.jianshu.com/p/caa802ee055b#fn10)

    图片 11

    MacHi 2017-05-01 18-43-07.png

    每种公司各种团队皆有和煦的编码标准,而代码格式化作用是增加开垦者输出符合标准代码成效的工具,这么些插件是在 VS Code 中帮忙 Prettier 的插件,Prettier[[11]](https://www.jianshu.com/p/caa802ee055b#fn11) 是八个 Javascript 代码的格式化学工业具。

    EditorConfig[[2]](https://www.jianshu.com/p/270106f66c46#fn2) 通过在工程中增添三个配备文件以及安装相应的插件,达成在不相同编辑器和 IDE 保持工程中代码文件编码格式的一致性,EditorConfig 的配置文件具备能够的可读性,并能很好的和版本调控系统同步同盟。

    (三)安装webstorm 的eslint 插件和 prettier 插件并启用插件

    更加的多布置形式参照他事他说加以考察:WebStorm Setup · Prettier

    基于官方介绍webstorm 分别有2种处理:

    1. WebStorm 2018.1 和上述的版本
    2. WebStorm 2017.3 和更早的版本

    固然用英特尔liJ IDEA, PhpStorm, PyCharm, and other JetBrains IDEs, 则须求设置prettier插件和 eslint 插件,而webstorm 的话私下认可会帮您安装上,那也是推荐 webstorm 的因由。

    eslint配合git

    为了最大程度调整每种人的正统,我们得以在git commit代码的时候,使用git hook调用eslint举办代码标准验证,不标准的代码不只怕提交到库房。

    1. 安装husky (哈士奇:D)
    npm i husky -D
    
    1. 修改package.json的scripts
    "scripts": {
      ...
      "lint": "eslint --ext .js --ext .jsx client/",
      "precommit": "npm run lint"
    }
    

    precommit是二个钩子,当试行git commit的时候,独有经过了precommit技艺够执行成功(注意,此时的eslint是在调控台通过全局命令eslint运转的,所以在此以前要求全局安装eslint以及借助插件(第0步)。

    Auto Close Tag[[12]](https://www.jianshu.com/p/caa802ee055b#fn12)

    图片 12

    MacHi 2017-05-01 18-35-30.png

    进步开采功用的插件,在 VS Code 中接济自动补全 HTML/XML 关闭标签。

    当我们在编辑器可能 IDE 中开发有些文件时,艾德itorConfig 插件会从文件所在目录初始逐级向上查找 .editorconfig,直到达到根目录或许找到富含属性 root=true.editorconfig 文件结束。当找到全体满意条件的 .editorconfig 配置文件后,插件会读取那几个布署文件的内容,距离文件路线最短的配备文件中的属性优先级最高,同多少个文件依据从上到下形式读取,尾部定义的同名属性优先级要超越最上部概念的。

    1. WebStorm 2018.1 和上述的本子

    官方私下认可已经济合作并了 prettier 支持,只供给配备非常多个大局的 prettier 模块调用方式就能够使用了(必须布署)。图片 13

    图片 14

    赶快键是:Alt-Shift-Cmd-P on macOS or Alt-Shift-Ctrl-P on Windows and Linux

    氪金王的好处,进级快,匡助快,免破解,省心省时不积累零钱!

    editorconfig

    区别编辑器对文件的格式会有早晚的区分,借使不联合一些行业内部,大概您跟外人合作的时候,每一次换代下来外人的代码就能一大堆报错。

    诸如:indent_style/indet_size/charset/end_of_line/insert_final_newline/trim_trailing_whitespace等等差距都会促成难点。

    1. 设置插件(webstorm跳过) 此处以VS Code为例

      去公司中搜寻 EditorConfig for VS Code举行安装,那样VS Code就能够优先根据项目根目录的.editorconfig文件对缩进之类风格举办布局,覆盖VS Code暗中认可配置。

      EditorConfig 插件会从文件所在目录开头逐级向上查找 .editorconfig,直到到达根目录或许找到满含属性 root=true 的 .editorconfig 文件甘休。

      当找到全体满足条件的 .editorconfig 配置文件后,插件会读取那么些计划文件的源委,距离文件路线最短的布局文件中的属性优先级最高,同二个文本依据从上到下形式读取,尾部定义的同名属性优先级要压倒顶上部分概念的。

      大部编辑器都有其一插件,尽管团队成员运用差异的IDE,也能够很好的联合代码风格。

      借使保险.editorconfig这一个文件间接就可以。

    2. 在项目根目录新建 .editorconfig

    图片 15

    editorconfig

    1. 编纂配置文件
    root = true                     // 表示当前是项目根目录
    
    [*]                             // 所有文件都使用配置
    charset = utf-8                 // 编码格式
    indent_style = space            // Tab键缩进的样式,由space和table两种 一般代码中是space
    indent_size = 2                 // 缩进size为2
    end_of_line = lf                // 以lf换行 默认win为crlf mac和linux为lf
    insert_final_newline = true     // 末尾加一行空行
    trim_trailing_whitespace = true // 去掉行尾多余空格
    

    注: 借使开掘IDE自动的格式化与eslint准绳产生了冲突,记得自个儿去改造格式化法规。

    在VS Code中,点击 文件>首选项>设置

    在寻找框中输入“eslint.autoFixOnSave”

    别忘了先在伸张市肆安装好"ESLint"那几个插件哦。

    那样的话没有须求协和手动格式化,保存的时候便格式化成功了,倘若现身错误还会冒出波浪线友好提醒。

    小tip:假设有局地平整本人不想设置完全失效,不过的确有一行代码笔者不可能让她检查怎么做?

    答: 在该代码前边增多注释

    import App from './App.jsx'; // eslint-disable-line
    

    更加多学学请参见官方文档:

    1. ESlint 官方网站:https://eslint.org/
    2. editorconfig 官网: http://editorconfig.org/

    Auto Rename Tag[[13]](https://www.jianshu.com/p/caa802ee055b#fn13)

    图片 16

    MacHi 2017-05-01 18-36-51.png

    抓好开销效用的插件,在 VS Code 中支持重命名 HTML/XML 对应标签。

    亟待评释的是,Windows 客商在开立布局文件时要将文件命名称为 .editorconfig.,之后能源管理器会自动将其重命名称叫 .editorconfig

    2. WebStorm 2017.3 和更早的本子

    那么些本子有2种情形:

    • ①是eslint 模式,使用 eslint-plugin-prettier 插件和启用eslint 插件同盟,这里一定于选用 eslint 模块来驱动 prettier 模块,然后中间驱动则是靠eslint-plugin-prettier

    第一启用 eslint,况兼安插 eslint 模块地方,私下认可会自动读取当前目录的 eslint.rc 配置文件,然后必要打开 npm 安装eslint-plugin-prettier其一插件,前边再统一验证。

    图片 17
    图片 18

    • ②是一向动用 prettier 作为额外工具来使用。
      图片 19图片 20图片 21
      图片 22上边三种办法的暗中认可连忙键都以Cmd/Ctrl-Shift-A(在 mac 下是comm shift A),感到不爽直,按需修改急速键就能够。

    Color Highlight[[14]](https://www.jianshu.com/p/caa802ee055b#fn14)

    图片 23

    MacHi 2017-05-01 18-43-44.png

    代码中平日会现出设置颜色,通常是用十六进制格式来表示叁个颜色值,举例 #EB6066,但那个值对开采者来讲是从未意思的,大家看不出来到底对应的是什么颜色,这些插件支持开采者在 VS Code 中支持十六进制格式的水彩进行预览。

    EditorConfig 的布局文件

    如上介绍,大家理解 EditorConfig 的安插文件名称为 .editorconfig,它的剧情遵从INI[[3]](https://www.jianshu.com/p/270106f66c46#fn3) 格式,同临时间开展一些扩张和定制,举例辅助部分通配符方式相配和自定义的品质识别,section 名字代表文件路线,允许存在 [] 字符。文件必需是 UTF-8 编码的,并使用 CRLF 或者 LF 作为换行符。

    下边我们先是来看一下官方网址提供的例子,有个直观的认知,然后相比较着再来详细介绍通配符情势和支撑的性质定义。

    # EditorConfig is awesome: http://EditorConfig.org
    
    # top-most EditorConfig file
    root = true
    
    # Unix-style newlines with a newline ending every file
    [*]
    end_of_line = lf
    insert_final_newline = true
    
    # Matches multiple files with brace expansion notation
    # Set default charset
    [*.{js,py}]
    charset = utf-8
    
    # 4 space indentation
    [*.py]
    indent_style = space
    indent_size = 4
    
    # Tab indentation (no size specified)
    [Makefile]
    indent_style = tab
    
    # Indentation override for all JS under lib directory
    [lib/**.js]
    indent_style = space
    indent_size = 2
    
    # Matches the exact files either package.json or .travis.yml
    [{package.json,.travis.yml}]
    indent_style = space
    indent_size = 2
    

    (三) 配置 eslint 插件和 prettier插件

    Document This[[15]](https://www.jianshu.com/p/caa802ee055b#fn15)

    图片 24

    MacHi 2017-05-01 18-37-27.png

    在 VS Code 中帮衬在 TypeScript 和 JavaScript 文件中自动生成 JSDoc 注释的插件。

    图片 25

    文本路线的通配符形式

    .editorconfig 中的文件路线协助通配符方式匹配,主要有如下 6 种:

    通配符 含义
    * 匹配除了 / 路径分隔符之外的任意字符串
    ** 匹配任意字符串
    ? 匹配任意单个字符
    [name] 匹配 name 表示的范围内任意单个字符
    [!name] 匹配 name 表示的范围之外的任意单个字符
    {s1,s2,s3} 匹配给定的字符串

    1. eslint 的配置

    eslint 的反省准绳是由此配备文件.eslintrc 达成的,可是各家有各家的 eslint 配置文件GitHub – AlloyTeam/eslint-config-alloy: AlloyTeam ESLint 规则:

    图片 26图片 27

    详细仿照效法网站:

    • AlloyTeam ESLint 规则
    • 超脱令人抓狂的ESlint 语法检查评定配置表达 – web攻城方略 – SegmentFault 思否
    • ESLint配置文件.eslintrc参数表达 · GitHub

    可是这里不纠结用哪种 eslint 的配备,具体看项目和团队,这里只是表明需求做 eslint 的布局,而且须要做一些表明:

    .eslintrc 配置文件必要增加修改地方,首就算为着 prettier插件和eslint-config-prettier 插件和eslint-plugin-prettier插件使用的:

    JavaScript

    // 因为使用了 eslint 和 prettier,所以要增加她们 extends: [ 'eslint:recommended', 'plugin:prettier/recommended'], // required to lint *.vue files 使用 html参数 plugins: ['html', 'prettier'], // rules 准绳就遵照各家写法。

    1
    2
    3
    4
    5
    6
    7
    // 因为使用了 eslint 和 prettier,所以要加上他们
    extends: [ 'eslint:recommended', 'plugin:prettier/recommended'],
     
    // required to lint *.vue files 使用 html参数
    plugins: ['html', 'prettier'],
     
    // rules 规则就按照各家写法。

    在 webstorm 下,在品种根目录.eslintrc作为配置文件。

    Git Blame[[16]](https://www.jianshu.com/p/caa802ee055b#fn16)

    图片 28

    MacHi 2017-05-01 18-38-02.png

    在公司多个人合营开拓进程中,大家常见要求掌握某行代码近年来一回是何人修改的,Git Blame 插件就提供了那样贰个有益于的成效。

    图片 29

    支撑的质量

    上边是 EditorConfig 文件中支持的常见属性定义,完整的性质列表能够查看这里[[4]](https://www.jianshu.com/p/270106f66c46#fn4)。必要小心的是,全数属性都以不区分轻重缓急写的。

    属性名 含义
    root 特殊属性,只能在文件头部使用,不要包含在任何 sections 中,true 表示是最顶层的配置文件,这样会插件会停止搜索 .editorconfig 文件
    indent_style 缩进样式,可以取值为 tabspace
    indent_size 缩进的大小,即缩进的列数,当 index_style 取值 tab 时,indent_size 会使用 tab_width 的值
    tab_width 设置 tab 代表的列数,默认是 indent_size 的值,通常不需要指定
    end_of_line 使用的换行符,取值为 lfcr 或者 crlf
    charset 字符编码,取值为 latin1utf-8utf-8-bomutf-16beutf-16le,当然 utf-8-bom 不推荐使用
    trim_trailing_whitespace 如果设置为 true 表示去掉换行行首的任意空白字符,false 表示不去掉
    insert_final_newline 如果设置为 true 表示保存文件时文件以一个空白行结尾,false 则保证不以空白行结尾

    说起底大家来看一下老牌的 redux[[5]](https://www.jianshu.com/p/270106f66c46#fn5) 框架的 .editorconfig 文件的剧情,好有个真正的感受:

    # EditorConfig helps developers define and maintain
    # consistent coding styles between different editors and IDEs.
    
    root = true
    
    [*]
    end_of_line = lf
    charset = utf-8
    trim_trailing_whitespace = true
    insert_final_newline = true
    indent_style = space
    indent_size = 2
    
    [*.md]
    trim_trailing_whitespace = false
    

    2. prettier的配置

    prettier 的自己商酌准则是因此配备文件.prettierrc 完结的,可是貌似的话,只需求配备少部分平整就能够:

    JavaScript

    { "printWidth": 100, "singleQuote": true, "semi": false }

    1
    2
    3
    4
    5
    {
      "printWidth": 100,
      "singleQuote": true,
      "semi": false
    }

    有不小可能率会产出的景色是,prettier 格式化后,全体加了分店,然而 eslint 又要去掉分号,那么就能够另行了,这里能够简轻巧单地安装 prettier 的分店设置跟 eslint 保持一致,别的如此类推,但只适用在多少个相比较特别的地方,能够参照官方文档。官方有详实的介绍:Configuration File · Prettier

    Rainbow Brackets[[17]](https://www.jianshu.com/p/caa802ee055b#fn17)

    在 React Native 开拓中不常会设有多样括号混合使用,为了可以更加好的分别,那一个插件帮助不一样类其他括号进行彩色着色,援助圆括号,方括号和花括号。

    图片 30

    EditorConfig 的插件

    当前主流的编辑器大概 IDE 基本上都有相应的 EditorConfig 插件,有的是松手销持的,有的供给独自设置。必要留神的是,不用的插件对 EditorConfig 属性的协理度分化,前面具体介绍各个 IDE 的插件时方可关心下。下图所示的编辑器或许 IDE 已经松开了 EditorConfig 的插件,因而无需独立设置配备,直接行使就可以,能够见见 WebStorm 无需单独设置 艾德itorConfig 的插件。

    图片 31

    image_1aluh83v0u7ftut41rf2j1q4e9.png-178.5kB

    下图所示的编辑器或许 IDE 近来从未有过内置对 EditorConfig 的帮衬,因而只要要运用 EditorConfig 的效应的话供给首先下载插件。上篇小说中介绍的 Atom,Sublime Text 3,Visual Studio Code 都亟待设置插件,Deco 也从未放置对 EditorConfig 的支撑,但这几天也没找到呼应的插件,也等于说 Deco 不援助 EditorConfig 的施用,终归它才是贰个流产儿。

    图片 32

    editorconfig.png-572.7kB

    (四) 配置 editorconfig

    • EditorConfig能够援救开采者在分裂的编辑器和IDE之间定义和维护一致的代码风格。
    • EditorConfig包蕴三个用于定义代码格式的公文和一堆编辑器插件,那一个插件能够让编辑器读取配置文件并依此格式化代码。

    对此作者个人的知情正是,editorconfig可以帮助开辟工具在机关格式化大概机关排版只怕录入排版的时候实行代码格式化,但是只可以协助相比较轻巧的平整,可是也缓慢解决了一片段代码格式化的压力和本金,所以有比尚未好,并且最佳要有。

    JavaScript

    // 放在项目根目录的.editorconfig文件 root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 放在项目根目录的.editorconfig文件
    root = true
     
    [*]
    charset = utf-8
    indent_style = space
    indent_size = 2
    end_of_line = lf
    insert_final_newline = true
    trim_trailing_whitespace = true

    详尽参照他事他说加以考察:

    • 【译】EditorConfig介绍 | AlloyTeam
    • EditorConfig

    React-Native/React/Redux snippets for es6/es7[[18]](https://www.jianshu.com/p/caa802ee055b#fn18)

    图片 33

    MacHi 2017-05-01 18-34-49.png

    在 VS Code 中帮衬 React Native,React,Redux 常见代码片段的插件。

    Atom plugin[[6]](https://www.jianshu.com/p/270106f66c46#fn6)

    Atom 中安装 EditorConfig 是因而 Atom 的包管理器实现的,推行如下命令就能够

    apm install editorconfig
    

    其一插件近年来扶助的习性有:

    属性名 附加说明
    root
    indent_style
    indent_size
    end_of_line 支持 lfcrlf 两个取值
    charset 支持 latin1utf-8utf-16beutf-16le 四个取值

    (五) 严厉监督,依据流程检查和格式化代码,依据标准和供给进行代码提交。

    供给鲜美赞臣点,代码格式化需求由上而下实施,若无强制性压力催促,那么是争辩不了人类的惰性的。

    整套代码检查和格式化流程应该规范为如下步骤:

    1. 应用eslint 並且尝试自动修复全体标题(eslint 有 autofix 提示,能够实行—fix 修复,遵照 .eslintrc 配置文件来开展修补)。
    2. 利用 prettier 格式化全部代码。
    3. 差别性修复代码,因为微微格式只怕别的题目导致出错而被前两部过滤之后还剩余的。(经常前面两步基本解决了具备标题了)
    4. 把特出的格式化后的代码提交到版本库。

    参谋文书档案:

    • 什么花30分钟消除 eslint 产生的各个不当 | 汤姆yail的记得现场
    • Introducing Prettier with Eslint – Michael Hsu – Medium
    • Efficient Code Analyzing and Formatting (for Vue.js) with ESLint and Prettier

      1 赞 收藏 评论

    图片 34

    TODO Highlight[[19]](https://www.jianshu.com/p/caa802ee055b#fn19)

    图片 35

    MacHi 2017-05-01 18-32-18.png

    在 VS Code 中支持 TODO:FIXME: 等品类注释关键词高亮的插件。

    图片 36

    Sublime Text plugin[[7]](https://www.jianshu.com/p/270106f66c46#fn7)

    Sublime Text 中得以由此 Package Control 来安装 EditorConfig 插件,如下所示:

    图片 37

    image_1am36t9gf10pboit1lgbn1n1p449.png-71.2kB

    其一插件近年来支撑的性质有:

    属性名 附加说明
    root
    indent_style
    indent_size
    end_of_line
    charset
    trim_trailing_whitespace
    insert_final_newline

    Path Intellisense[[20]](https://www.jianshu.com/p/caa802ee055b#fn20)

    图片 38

    MacHi 2017-05-01 18-49-37.png

    在 VS Code 中援助自动补全文件路径名的插件。

    Visual Studio Code plugin[[8]](https://www.jianshu.com/p/270106f66c46#fn8)

    展开 VS Code Quick Open(Mac 上边能够经过飞快键 ⌘ P),并输入 ext install EditorConfig 就能够找到 EditorConfig 插件,如下所示,安装后重启即可。

    图片 39

    image_1am3dv6ur1n27v0gcf7ui7fnm.png-101.4kB

    本条插件近些日子支持的属性有:

    属性名 附加说明
    indent_style
    indent_size
    tab_width
    trim_trailing_whitespace
    insert_final_newline

    AutoFileName[[21]](https://www.jianshu.com/p/caa802ee055b#fn21)

    图片 40

    MacHi 2017-05-01 20-13-03.png

    另一个机动补全文件名的插件,如下所示:

    图片 41

    总结

    EditorConfig 的指标是在分化的编辑器或然 IDE 中保险代码文件编码风格的一致性,它必要同时借助配置文件和插件来兑现。从地方的深入分析能够看看,区别编辑器大概IDE 上边的 EditorConfig 插件对质量的支撑不尽同样,同不常候协理的习性独有五个:

    • indent_style
    • indent_size

    也正是最低只可以有限援助代码在颇具编辑器恐怕 IDE 上面包车型地铁缩进风格大同小异。

    EditorConfig[[22]](https://www.jianshu.com/p/caa802ee055b#fn22)

    图片 42

    MacHi 2017-05-01 20-25-05.png

    EditorConfig[[23]](https://www.jianshu.com/p/caa802ee055b#fn23) 通过在工程中增添二个配置文件以及安装相应的插件,完毕在分歧编辑器和 IDE 保持工程中代码文件编码格式的一致性,EditorConfig 的安插文件具备非凡的可读性,并能很好的和版本调节系统同步搭档。更详细内容能够参见《作者的 React Native 技能树点亮安顿 の 代码风格统一工具 EditorConfig》一文。


    1. https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native ↩

    2. https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode ↩

    3. https://flow.org/ ↩

    4. https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint ↩

    5. http://www.gimpel.com/html/pcl.htm ↩

    6. http://www.gimpel.com/html/flex.htm ↩

    7. http://findbugs.sourceforge.net/ ↩

    8. http://oclint.org/ ↩

    9. http://eslint.org/ ↩

    10. https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode ↩

    11. https://github.com/prettier/prettier ↩

    12. https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag ↩

    13. https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag ↩

    14. https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight ↩

    15. https://marketplace.visualstudio.com/items?itemName=joelday.docthis ↩

    16. https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame ↩

    17. https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets ↩

    18. https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux ↩

    19. https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight ↩

    20. https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense ↩

    21. https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename ↩

    22. https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig ↩

    23. http://editorconfig.org/ ↩

    进展阅读

    《使用editorconfig配置你的编辑器》[[9]](https://www.jianshu.com/p/270106f66c46#fn9)

    《使用 EditorConfig来标准代码缩进等的品格以webstorm为例》[[10]](https://www.jianshu.com/p/270106f66c46#fn10)

    《WebStorm 9 纳入 EditorConfig 支持》[[11]](https://www.jianshu.com/p/270106f66c46#fn11)


    应接关怀自己的微信民众号,潜心与原创大概分享Android,iOS,ReactNative,Web 前端移动支付领域高水平文章,重要回顾产业界最新动态,前沿本领趋势,开源函数库与工具等。

    图片 43


    1. http://www.jianshu.com/p/8e9df5f85bca ↩

    2. http://editorconfig.org/ ↩

    3. https://en.wikipedia.org/wiki/INI_file ↩

    4. https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties ↩

    5. https://github.com/reactjs/redux ↩

    6. https://github.com/sindresorhus/atom-editorconfig#readme ↩

    7. https://github.com/sindresorhus/editorconfig-sublime#readme ↩

    8. https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig ↩

    9. http://www.cnblogs.com/xiyangbaixue/p/4201490.html ↩

    10. http://blog.csdn.net/gextreme/article/details/23794837 ↩

    11. https://csspod.com/editorconfig-in-webstorm9/ ↩

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:在js开发前需要的东西,技能树点亮计划

    关键词: