jslint、flow 与 typescript

jslint airbnb-config

jslint 的作用是对 js 做语法搜检,他能够使代码越发范例、清楚,而 airbnb-config 是其中最盛行的一套搜检划定规矩。

装置要领

npm install jslint eslint-config-airbnb
然后在项目目次下建立 .eslintrc 文件,输入内容「{ “extends”: “airbnb”, “rules”: { “strict”: 0 }」。

命令行

jslint <目次|文件>
运转后将会搜检目次下的文件,并将有题目的语句打印出来。

搭配 webpack

须要装置 jslint-loader,并且在 webpack.config.js 的 preloaders 里做一些设置。
当 webpack 编译的时刻就会挪用 jslint 做搜检,假如发明不符合范例的处所,就会自动报错。

搭配编辑器

Atom 编辑器下能够装置 linter-eslint 插件,能够在编辑文件的时刻及时提醒语法毛病。

运用本钱(中)

搭配编辑器运用是开辟过程当中的最好实践。别的两种要领都邑致使代码编写以后巨量文件须要修正的题目。
但是在运用过程当中也会碰到林林总总的题目,比如在函数内声明一个变量致使多行代码的修改,函数内部不能修正参数等等,须要消费一点时候去习气。

迁徙本钱(低)

针对旧项目,我们能够只用 jslint 作为编辑器的插件,只在写代码的时刻会给出提醒,不影响代码的编译。
针对新项目,我们能够将 jslint 同时用在编辑器和 webpack 上。

收益(中)

因为 jslint 主如果对 js 语法和花样做搜检,所以收益主如果使得代码更范例。

flow

flow 是 facebook 推出的一款 js 静态范例搜检东西。由 ocam 言语编写。

装置要领

sudo brew install flow

运用要领

须要搜检的 js 文件须要在文件顶部说明 。
// @flow
然后在项目目次下运转 flow init,再挪用 flow 来实行搜检。

搭配 babel

flow 官方供应了一个 babel 插件 transform-flow-strip-types 特地用于删除 flow 定义的范例声明。

搭配编辑器

atom 下有个 linter-flow 插件能够运用,作为及时的搜检。

运用本钱(偏高)

假如推行运用的话,首先是进修本钱的题目,但幸亏 flow 并不算庞杂。
别的一个题目是用了 flow 的话就不能用 jslint 了,虽然 flow 会搜检代码言语的合法性,但想要更严厉的花样搜检就没办法了。
运用 flow 平常的形式就是在开辟环境下搭配编辑器做及时的搜检,然后编译或许运转的时刻用 babel 把范例声明的语句删撤除。

迁徙本钱(低)

旧项目假如之前没有用过 babel 的话迁徙会比较贫苦,因为 flow 依靠 babel。
新项目的话本钱则很低,只须要加上 babel 插件就好了。

收益(偏高)

flow 对代码做了范例搜检,能够防止 「undefined is not a function」之类的毛病。而且因为范例牢固了,在 v8 上的实行效力会更高。

typescript

typescript 是微软出品的一个 js 超集,为 js 带来了范例等一系列功用,使得 js 有了类似于 java 般的开辟体验。

装置要领

npm install -g typescript

运用要领

typescript 文件是以 ts 做后缀的。
在项目中运转 tsc –init 做初始化。
然后 tsc <文件名> 做编译,会生成对应的 js 文件。

搭配 webpack

ts-loader 能够处置惩罚 typescript 的编译。

搭配编辑器

atom-typescript 是 typescript 官方出品的 atom 插件,其包括的如「goto declaration」,「quick fix」,「live error analysis」等功用能够带来如 java ide 般的开辟体验。

运用本钱(高)

typescript 的进修本钱比 flow 要高,他包括了泛型、接口等许多 java、C# 的观点,关于熟习这两种言语的人来讲 TS 能够上手难度会很简单。
但假如要构建大型顺序的话 TS 或许会蛮适宜,TS 的自动提醒能够准确的列出一个变量的一切要领,别的编辑器的功用也能很好的进步开辟效力。
typescript 也支撑 jsx 语法。

迁徙本钱(高)

旧项目基础不能迁徙。
新项目须要加上 ts 的 webpack 插件。

收益(高)

因为 TS 供应了许多强范例言语的功用,所以能够使得代码更硬朗,编译后的代码也是针对 V8 等 js 引擎优化过的,所以实行效力也不会太慢。
官方的编辑器插件还供应 「Format code on save」的功用,能够保证输出的代码作风一致,这一功用能够替换 jslint。
TS 1.8 版本里支撑 jsx,await, async 等 es6、es7 的语法,所以能够在项目中省去 babel。

    原文作者:时允
    原文地址: https://segmentfault.com/a/1190000005150319
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞