The static code analysis and linting tool ESLint is the de-facto standard for linting JavaScript projects. In this lesson we’ll see how to install, run, and configure it for your preferences.

Install:

npm i -D eslint

Run:

npx eslint src

Create: .eslintrc file

{
"parserOptions": {
"ecmaVersion": "2018"
},
"extends": [
"eslint:recommended"
],
"rules": {
"no-console": "off"
},
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
}
}

The code formatting tool prettier can help you avoid a lot of useless time spent formatting code and arguing about code formatting with your co-workers. It can also help you catch subtle issues with your code that you may not notice otherwise. In this lesson we’ll learn how to install and run prettier.

Install:

npm i -D prettier

Run:

"format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)\""
npm run format

In VSCode: Settings.json

{
"editor.formatOnSave": true
}

Prettier is a pretty opinionated tool, but it does allow for some customization. In this lesson we’ll check out the prettier playground and see what options we want to enable in our project’s .prettierrc file.

After adding in our custom configuration, we’ll create a .prettierignore file so that you can avoid formatting any files generated within the project such as node_modules or a build folder.

.prettierrc:

{
"arrowParens": "avoid",
"bracketSpacing": false,
"insertPragma": false,
"jsxBracketSameLine": true,
"parser": "babylon",
"printWidth": 80,
"proseWrap": "always",
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false
}

.prettierignore:

node_modules
coverage
dist
build
.build
.vscode
package.json
package-lock.json
debug.log

Because prettier can automatically fix a lot of stylistic issues in our codebase, it’s not necessary to have eslint check for those and it can actually be kind of annoying if it does. So let’s see how we can use eslint-config-prettier to disable all rules that are made irrelevant thanks to prettier.

Install:

npm i -D eslint-config-prettier

.eslintrc:

{
"parserOptions": {
"ecmaVersion": "2018"
},
"extends": [
"eslint:recommended",
"eslint-config-prettier"
],
"rules": {
"no-console": "off"
},
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
}
}

You can’t force everyone on your project to use the prettier integration for their editor, so let’s add a validation script to verify that prettier has been run on all project files.

Fortunately for us, Prettier accepts a --list-different flag that you can use that will throw an error when code is not up to the standard of your project.

  "scripts": {
"test": "node --require ./setup-global.js src/index.js",
"lint": "eslint src",
"format": "npm run prettier -- --write",
"prettier": "prettier \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)\"",
"validate": "npm run lint && npm run prettier -- --list-different"
},

We can run:

npm run validate

to check whether there is any files which is not formatted.

If it is, then will throw error, we can run:

npm run format

to format the code.

ESLint can check for a lot of things, but it’s not a great tool for checking the types of variables that flow through your application. For this you’ll need a type-checking tool like Flow or TypeScript. Let’s see how we can configure our project to work with Flow.

Install:

npm i -D flow-bin

Add script:

"flow": "flow",

Run:

npm run flow

For the first time, we run 'npm run flow' will tell us to run:

npm run flow init

it create a .flowconfig file.

Create a exmaple js file to pratice flow:

//@flow

function add(a: number, b: number): number {
return a + b
}
type User = {
name: {
first: string,
middle: string,
last: string,
},
}
function getFullName(user: User): string {
const {
name: {first, middle, last},
} = user
return [first, middle, last].filter(Boolean).join('')
}
add(1,2) getFullName({name: {first: 'Joe', middle: 'Bud', last: 'Matthews'}})

Run:

npm run flow

We won't see any error for this, if everything is correct type checking.

We have a 'validate' script setup previously:

"validate": "npm run lint && npm run prettier -- --list-different"

we can also add "flow" into it:

"validate": "npm run lint && npm run prettier -- --list-different && npm run flow"

In order to make 'validate' script works, we still need to install 'babel-eslint' for eslint to understand flow syntax:

Install:

npm i -D babel-eslint

.eslintrc:

{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": "2018"
},
"extends": [
"eslint:recommended",
"eslint-config-prettier"
],
"rules": {
"no-console": "off"
},
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
}
}

Then run:

npm run validate

it will checks eslint, prettier and flow.

We have a few checks we’ll run in continuous integration when someone opens a pull request, but it’d be even better if we could run some of those checks before they even commit their code so they can fix it right away rather than waiting for CI to run. Let’s use husky’s precommit script to run our validation.

Install:

npm i -D husky

Hook with 'precommit' with valdiation:

"precommit": "npm run validate"

If you don't want this precommit hook and commit you changes anyway you can do:

git commit -m "bad stuff" --no-verify

Rather than failing when a developer has failed to format their files or run linting on all the files in the project on every commit, it would be even better to just automatically format the files on commit and only check the relevant files with eslint. Let’s use lint-staged to run scripts on the files that are going to be committed as part of our precommit hook.

Install:

npm i -D lint-staged

package.json:

"precommit": "lint-staged && npm run flow"

.lintstagedrc:

{
"linters": {
"*.js": [
"eslint"
],
"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)": [
"prettier --write",
"git add"
]
}
}

Now when you do commit, it will automatcilly format all the code and readded to git and commit it.

Full code here.

 

[Testing] Static Analysis Testing JavaScript Applications的更多相关文章

  1. Unit Testing, Integration Testing and Functional Testing

    转载自:https://codeutopia.net/blog/2015/04/11/what-are-unit-testing-integration-testing-and-functional- ...

  2. Difference Between Performance Testing, Load Testing and Stress Testing

    http://www.softwaretestinghelp.com/what-is-performance-testing-load-testing-stress-testing/ Differen ...

  3. WWDC: Thread Sanitizer and Static Analysis

    Thread Sanitizer 过程 编译过程中链接了一个新的库.  也可以通过命令行来操作: $ clang -fsanitize=thread source.c -o executable $ ...

  4. Go testing 库 testing.T 和 testing.B 简介

    testing.T 判定失败接口 Fail 失败继续 FailNow 失败终止 打印信息接口 Log 数据流 (cout 类似) Logf format (printf 类似) SkipNow 跳过当 ...

  5. [Unit Testing] Fundamentals of Testing in Javascript

    In this lesson, we’ll get the most fundamental understanding of what an automated test is in JavaScr ...

  6. Penetration Testing、Security Testing、Automation Testing

    相关学习资料 http://www.cnblogs.com/LittleHann/p/3823513.html http://www.cnblogs.com/LittleHann/p/3828927. ...

  7. [Unit Testing] AngularJS Unit Testing - Karma

    Install Karam: npm install -g karma npm install -g karma-cli Init Karam: karma init First test: 1. A ...

  8. 测试理论--branch testing and boundary testing

    1 branch testing 分支测试 测试代码的所有分支 2 boundary testing 测试 程序的限制条件

  9. [React & Testing] Simulate Event testing

    Here we want to test a toggle button component, when the button was click, state should change, styl ...

随机推荐

  1. Linux菜鸟起飞之路【三】Linux常用命令

    一.Linux命令的基本格式 命令 [选项] [参数] a)命令:就是告诉操作系统要做什么 b)选项:说明命令的运行方式,有的会改变命令的功能,选项通常以“-”开始 c)参数:说明命令的操作对象,如文 ...

  2. struct 区别 在C 和C++ 中

    C语言中:   Struct是用户自定义数据类型(UDT).   C++语言中:   Struct是抽象数据类型(ADT),支持成员函数的定义.       在C++中,struct的成员的默认访问说 ...

  3. day20-python之装饰器

    1.装饰器 #!/usr/bin/env python # -*- coding:utf-8 -*- import time def cal(l): start_time=time.time() re ...

  4. (转)iOS 最佳实践

    本文转自http://www.jianshu.com/p/b0bf2368fb95 感谢作者和译者 iOS最佳实践 iOS最佳实践 译者注 本文翻译自 futurice 公司的 iOS Good Pr ...

  5. addEvenListener('DOMContentLoaded',function(){})

  6. Android开发工具——Gradle知识汇总

    1.什么是构建工具 Eclipse大家都知道是一种IDE(集成开发环境),最初是用来做Java开发的,而Android是基于Java语言的,所以最初Google还是希望Android能在Eclipse ...

  7. js 获取json对象的Key、value

    <script type="text/javascript"> getJson('age'); function getJson(key){ var jsonObj={ ...

  8. 路由重分发 最重要 最难 ccnp

    路由重分发   多种协议之间    彼此学习到对方的路由 重分发好   结果好 重分发不好   结果最好是产生次优路径      最差事产生路由黑洞和环路 实例1:    重分发一般需要双向重分发   ...

  9. 01-封装函数求斐波那契数列第n项

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. 2013 Asia acm Hangzhou Regional Contest 杭州现场赛

     B Stealing Harry Potter's Precious 题目大意:给定一个n*m的地图,某些点可以走,某些点可以走某些点不可以走,给定一个起点,又给出了k个点k<=4,要求从起点 ...