Kuangchi

React开发,在VS Code中配置ESLint, Prettier, and Flow

Kuangchi · 2017-06-01翻译 · 494阅读 原文链接

PS:因为有时间限制,很粗糙的就翻译出来了,这是我的第一篇译文,水平不足。希望大家多给点意见,我会多多改进的。 这篇短文会针对所有React/React Native 项目,简单介绍下一致性和可重用开发流程。当你投入了很多的精力去编写高质量编码,就不用花很多的时间去调试。使用一致性开发流程可以提高你的代码质量并且不用花很多时间去调试。这篇简介我将告诉你如何配置你的编译器进行代码格式化,代码美化,类型检查。

推荐测试驱动型开发和预构建配置。我不会太深入讲解这两者的区别。 对于web开发,我推荐 create-react-app 。手机端开发使用React Native CLI 两者都需要零构建配置。 Jest 很流行去测试React.

安装

首先下载安装 VS Code,然后从终端启动VS Code,下面是具体操作步骤:

我使用VS Code作为我自己的编辑器。如果你使用Sublime Text或者Atom,别担心,这篇文章依然适合你。但是你需要使用最新的编辑器版本。

让我们先生成一个没有任何配置的App.在这篇文章里面,我们使用React Native CLI。但是你也可以遵循 create-react-app

$ react-native init SweetApp && cd SweetApp

使用VS Code打开这个项目 $ code .

当你打开VS Code,点开侧边栏的插件按钮,安装以下插件

ESLint Setup

我们安装使用了Airbnb代码规范的ESLint,参照Airbnb’s JavaScript Github Repo的安装说明。 然后安装babel-eslint $ npm install babel-eslint --save-dev

你将会在你的项目里看到一个 .eslintrc文件。打开它,配置如下:

Prettier Setup

在我们使用Prettier with ESLint前,还有几步需要去完成。我们已经安装了Prettier-ESLint插件了,现在我们还需要告诉VS Code在保存文件后使用一个代码规范去规范我们的代码。

如果你是Mac用户,按下CMD + ,

//保存时格式化文件,必须要一个格式化程序。并且这个文件一定不是自动保存的且编辑器不会关闭。
"editor.formatOnSave": true

启动Flow

Flow是一个javascript静态类型检查工具并且如果你使用React Native CLIcreate-react-app编译配置的话,那么就已经包含在你的项目里面了。

使用 Homebrew从终端安装Flow

$ brew install flow

“安装pre-project使用明确的版本而不是全局的,Flow将会工作的更好 ” 在每个项目里面运行Flow,我们将会安装Flow 从npm。过后,我们将配置 VS Code去运行Flow运行,从node_module 在代替全局安装 flow-bin

在安装flow-bin前,我们需确定安装哪一个版本。打开.flowconfig文件然后滑动到底部找到那个版本号。这是我们想从NPM安装的flow-bin版本的号。到我们文章发表的时候,这个版本号为 0.42.0

我们也需要安装一下 babel-preset for Flow

什么是babel-presets? https://babeljs.io/docs/plugins/#presets $ npm install flow-bin@0.42.0 babel-preset-flow --save-dev

打开.babelrc文件然后添加Flow as a preset并且添加配置[**“retainLines”: true**](http://Retain%20line%20numbers.%20This%20will%20lead%20to%20wacky%20code%20but%20is%20handy%20for%20scenarios%20where%20you%20can’t%20use%20source%20maps.%20%28NOTE:%20This%20will%20not%20retain%20the%20columns%29)

你的.babelrc文件应该像这样:

{
  "presets": [
    "react-native",
    "flow"
  ],
  "retainLines": true
}

现在我们想告诉你的编辑器去使用Flow从你的项目node_modules文件夹。我们也想禁用javascript验证仅当fix a known issue。 Open the Workspace settings.json file and add this: 打开Workspace settings.json文件,并且添加:



//支持使用flow通过你的node_modules文件夹,警告:检测到这个箱子是一个安全风险。当你们打开一个项目,我们将立即运行包含在里面的代码。
"flow.useNPMPackagedFlow": true,
//使用/禁用JavaScript验证。(Flow)
"javascript.validate.enable": false
//使用/禁用默认的JavaScript代码规范器(Prettier)
"javascript.format.enable": false

禁用默认JS代码规范,让Prettier去处理代码的格式化

让我们先创建一下Flow脚本 打开package.json文件并且添加以下脚本。

// start the flow server
"flow start": "flow start",
// stop the flow server
"flow stop": "flow stop",
// check the flow status
"flow status": "flow status",
// check the flow coverage percentage
"flow coverage": "flow coverage"

你的 package.json文件中的脚本应该像这样:

从相同文件夹例如你的package,json文件位置处运行下面的终端命令

$ npm run flow start

Flow server正在运行,而且将会根据在顶部的// @flow 注释对所有的文件进行类型检查

测试你的新的开发流程

SweetApp中打开index.ios.js文件

不要使用index.android.js文件当.flowconfig文件忽视它时。See this post on Stack Overflow使用.android去使用Flow

ESLint Linter

你应该注意到你代码里面红色的波浪线。你可以把你得鼠标指针悬浮在红色波浪线上然后ESLint将会告诉你的导致警告的原因。

删除在类render里面的return方法后面的分号。把你的鼠标放在红色波浪线上,你就会看到 ESLint警告你丢失了一个分号!

如果你没有看到任何代码规范警告请重新检查一下你的ESLint启动部分。

Prettier Code Formatter

Prettier将会在你保存的时候自动依据它的规则规范你的代码。

添加一个数字数组并且把这个数组赋值给一个test变量。数字数组规范化如下:

现在保存文件然后观察一下 Prettier的神奇效果!

现在名为test的数组已经被正确的规范化了!

Flow Type Checking

为了确保Flow正在工作,请在后台运行npm脚本flow start去开启Flow server $ npm run flow start

创建一个加函数并且返回两个数字的和:

现在让我们将add函数的参数类型改为错误的string类型。

注意到在保存文件后,红色的波浪线出现在add函数调用的数字参数下。把你的鼠标指针放在红色波浪线上Flow将会告诉你:

[flow] this type is incompatible with the expected parameter type of string

让我们使用正确的数字类型来修正add函数

Flow 类型错误消失了。

Flow VS Code extension的一个很酷的功能是它能在状态栏以百分比的形式自动更新 Flow的进度

🎉到这里你已经完成了所有设置! 🎉

衷心的希望这篇指导能够让你避免我碰到的那些坑并且能在以后作为一篇不错的参考帮助那些需要的人。 编码愉快!😀

译者Kuangchi尚未开通打赏功能

相关文章