npm script工作流 (一) eslint

创建项目

• 命令：npm init
• 生成文件： package.json

{
  "name": "hello-npm-script",
  "version": "0.1.0",
  "description": "hello npm script",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "npm",
    "script"
  ],
  "author": "wangshijun <wangshijun2010@gmail.com> (https://github.com/wangshijun)",
  "license": "MIT"
}

• npm init -f 【快速生成】

修改基本信息信息

$ npm config set init.author.email "zoranlee@gmail.com"
$ npm config set init.author.name "zoranlee"
$ npm config set init.author.url "https://github.com/zoranli"
$ npm config set init.license "MIT"
$ npm config set init.version "0.1.0"

执行任意命令

• npm run (package.json 中 scripts字段)
• npm run eslint （./node_modules/.bin/eslint **.js）

自定义 npm script

• 添加eslint 脚本
• 检查脚本：google、 airbnb。

步骤

• 1、添加eslint 依赖：

$ npm install eslint -D

• 2、 初始化 eslint 配置

$  ./node_modules/.bin/eslint --init

如下图：

image.png

• 3、生成文件：.eslintrc.js

module.exports = {
  env: {
    es6: true,
    node: true,
  },
  extends: 'eslint:recommended',
  rules: {
    indent: ['error', 4],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
  },
};

• 4、添加 eslint 命令
  package.json 的 scripts 字段中新增命令 eslint

{
  "scripts": {
    "eslint": "eslint *.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}

• 5、运行 eslint 命令
  npm run eslint

• 结果如下：

  
  image.png

React检查

eslint-plugin-react

react-native检查

react-plugin-react-native

eslint-config-airbnb
(内置eslint-plugin-react)

peerDependencies 安装失败

(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

vue检查

eslint-plugin-vue

.eslintrc* 里面的 rules 中配置

module.exports = {
  env: {
    es6: true,
    node: true,
  },
  extends: 'eslint:recommended',
  rules: {
    indent: ['error', 2],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
  },
};