代码格式校验及npm包管理

项目的一般配置

git忽略文件配置

在项目根目录下新建.gitignore配置文件(如果是在github上新建项目则默认自动生成)

• .gitignore内容及规则如下:

# 忽略日志目录
logs
# 忽略所有.log文件
*.log
# 忽略npm-debug.log及后面带有时间戳类的文件
npm-debug.log*
# 忽略node_modules
node_modules
# 忽略操作系统产生的临时文件
*.swp
# 忽略苹果电脑产生的临时文件
.DS_Store
# 忽略vscode产生的临时文件
.idea/
# 代码构建目录
build/
# vscode自动生成的配置文件
*.vscode

#.gitignore规则如下：
# /node_modules  /代表根目录
# node_modules/**/index.js **表示任意目录，表示忽略node_modules下面的所有index.js文件
# !node_modules/index.js   !表示忽略index.js不包括node_modules直系下面的index.js文件

统一编辑器配置

为了解决开发人员使用不同编辑器导致代码格式不统一的情况可以使用EditorConfig来解决
在项目根目录下新建.editorconfig文件，其内容如下：

# 在编辑一个文件时会从当前目录向外寻找.editorconfig配置文件直到找到某个.editorconfig文件其root = true
root = true

# 标识此配置适用于所有文件
[*]
# 文件适用的编码格式
charset = utf-8
# 一个tab是两个空格，标识缩进
indent_style = space
indent_size = 2
# 换行的方式
end_of_line = lf # 标识linux换行
# 在末尾插入新行
insert_final_newline = true
# 去掉一行末尾的空格
trim_trailing_whitespace = true
# 对于.json文件使用4个空格缩进
[*.json]
indent_size = 4

JS格式检查

使用eslint对JS进行格式检查

1. 执行npm i eslint babel-eslint --save-dev安装eslint和babel-eslint
2. 在项目根目录新建.eslintrc.js配置文件

.eslintrc.js内容如下：

module.exports = {
    //表示当前配置文件为根配置文件
    "root": true,
    //适用的环境
    "env": {
        "node": true,
        "mocha":true,
        "es6": true,
        "browser": true
    },
    //继承eslint默认的规则
    "extends": "eslint:recommended",
    //配置全局忽略的变量
    "globals": {
      "window": true
    },
    //检测规则使用"babel-eslint"，babel可以验证es6语法
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "script"
    },
    //规则的值为关闭：off或0,警告：warn或1,错误：error或2
    "rules": {
      //禁止输入console
      "no-console": "error",
      "no-alert": "error",
      //禁止输入分号
      "semi": [
        "error",
        "never"
      ],
      //必须使用单引号
      "quotes":[
        "error",
        "single"
      ],
      //首行缩进两个空格
      "indent": [
        "error",
        2
      ],
      //换行使用unix换行
      "linebreak-style": [
        "error",
        "unix"
      ],
    }
};

关于.eslintrc.js详细规则请访问ESLint
官网

3. 如果需要在编辑器中对JS进行格式检查，则需要在编辑器安装ESLint插件（比如vscode安装ESLint）
4. 如果存在不需要格式检查的JS文件可以在项目根目录新建.eslintignore文件，内容如下：

# 忽略node_modules
node_modules
# 忽略单元测试文件
test
# 忽略代码构建目录
build

CSS格式检查

使用stylelint对CSS和SCSS进行格式检查

1. 执行npm i stylelint --save-dev安装stylelint
2. 在项目根目录新建.stylelintrc.json文件，文件内容如下(推荐项目直接使用下面的规则或者使用官网默认规则)：

{
  "plugins": [],
  "rules": {
    "at-rule-no-unknown": null,
    "block-no-empty": true,
    "color-no-invalid-hex": true,
    "comment-no-empty": true,
    "declaration-block-no-duplicate-properties": [
      true,
      {
        "ignore": [
          "consecutive-duplicates-with-different-values"
        ]
      }
    ],
    "selector-class-pattern":"^[a-z][a-z-_]+$",
    "max-nesting-depth": 10,
    "declaration-block-no-shorthand-property-overrides": true,
    "font-family-no-duplicate-names": true,
    "font-family-no-missing-generic-family-keyword": true,
    "function-calc-no-unspaced-operator": true,
    "function-linear-gradient-no-nonstandard-direction": true,
    "keyframe-declaration-no-important": true,
    "media-feature-name-no-unknown": true,
    "no-descending-specificity": null,
    "no-duplicate-at-import-rules": true,
    "no-duplicate-selectors": true,
    "no-empty-source": true,
    "no-extra-semicolons": true,
    "no-invalid-double-slash-comments": true,
    "property-no-unknown": true,
    "selector-pseudo-class-no-unknown": true,
    "selector-pseudo-element-no-unknown": true,
    "selector-type-no-unknown": true,
    "string-no-newline": true,
    "unit-no-unknown": true,
    "at-rule-empty-line-before": [
      "always",
      {
        "except": [
          "blockless-after-same-name-blockless",
          "first-nested"
        ],
        "ignore": [
          "after-comment"
        ]
      }
    ],
    "at-rule-name-case": "lower",
    "at-rule-name-space-after": "always-single-line",
    "at-rule-semicolon-newline-after": "always",
    "block-closing-brace-empty-line-before": "never",
    "block-closing-brace-newline-after": "always",
    "block-closing-brace-newline-before": "always-multi-line",
    "block-closing-brace-space-before": "always-single-line",
    "block-opening-brace-newline-after": "always-multi-line",
    "block-opening-brace-space-after": "always-single-line",
    "block-opening-brace-space-before": "always",
    "color-hex-case": "lower",
    "color-hex-length": "short",
    "comment-empty-line-before": [
      "always",
      {
        "except": [
          "first-nested"
        ],
        "ignore": [
          "stylelint-commands"
        ]
      }
    ],
    "comment-whitespace-inside": "always",
    "custom-property-empty-line-before": [
      "always",
      {
        "except": [
          "after-custom-property",
          "first-nested"
        ],
        "ignore": [
          "after-comment",
          "inside-single-line-block"
        ]
      }
    ],
    "declaration-bang-space-after": "never",
    "declaration-bang-space-before": "always",
    "declaration-block-semicolon-newline-after": "always-multi-line",
    "declaration-block-semicolon-space-after": "always-single-line",
    "declaration-block-semicolon-space-before": "never",
    "declaration-block-single-line-max-declarations": 1,
    "declaration-block-trailing-semicolon": "always",
    "declaration-colon-newline-after": "always-multi-line",
    "declaration-colon-space-after": "always-single-line",
    "declaration-colon-space-before": "never",
    "declaration-empty-line-before": [
      "always",
      {
        "except": [
          "after-declaration",
          "first-nested"
        ],
        "ignore": [
          "after-comment",
          "inside-single-line-block"
        ]
      }
    ],
    "function-comma-newline-after": "always-multi-line",
    "function-comma-space-after": "always-single-line",
    "function-comma-space-before": "never",
    "function-max-empty-lines": 0,
    "function-name-case": "lower",
    "function-parentheses-newline-inside": "always-multi-line",
    "function-parentheses-space-inside": "never-single-line",
    "function-whitespace-after": "always",
    "indentation": 2,
    "length-zero-no-unit": true,
    "max-empty-lines": 1,
    "media-feature-colon-space-after": "always",
    "media-feature-colon-space-before": "never",
    "media-feature-name-case": "lower",
    "media-feature-parentheses-space-inside": "never",
    "media-feature-range-operator-space-after": "always",
    "media-feature-range-operator-space-before": "always",
    "media-query-list-comma-newline-after": "always-multi-line",
    "media-query-list-comma-space-after": "always-single-line",
    "media-query-list-comma-space-before": "never",
    "no-eol-whitespace": true,
    "no-missing-end-of-source-newline": true,
    "number-leading-zero": "never",
    "number-no-trailing-zeros": true,
    "property-case": "lower",
    "rule-empty-line-before": [
      "always-multi-line",
      {
        "except": [
          "first-nested"
        ],
        "ignore": [
          "after-comment"
        ]
      }
    ],
    "selector-attribute-brackets-space-inside": "never",
    "selector-attribute-operator-space-after": "never",
    "selector-attribute-operator-space-before": "never",
    "selector-combinator-space-after": "always",
    "selector-combinator-space-before": "always",
    "selector-descendant-combinator-no-non-space": true,
    "selector-list-comma-newline-after": "always-multi-line",
    "selector-list-comma-space-before": "never",
    "selector-max-empty-lines": 0,
    "selector-pseudo-class-case": "lower",
    "selector-pseudo-class-parentheses-space-inside": "never",
    "selector-pseudo-element-case": "lower",
    "selector-pseudo-element-colon-notation": "double",
    "selector-type-case": "lower",
    "unit-case": "lower",
    "value-list-comma-newline-after": "always-multi-line",
    "value-list-comma-space-after": "always-single-line",
    "value-list-comma-space-before": "never",
    "value-list-max-empty-lines": 0
  }
}
> 详细规则请查看[stylelint官网](https://cloud.tencent.com/developer/section/1489626)

3. 如果需要在编辑器中对CSS和SCSS进行格式检查，则需要在编辑器安装stylelint插件（比如vscode安装stylelint）

package.json参数配置

package.json配置如下：

{
  //软件包发布到npm后，npm install时所用名字
  "name": "anydoor_test_lulin",
  //npm包版本号
  "version": "0.1.3",
  //描述，方便别人搜到你的npm包
  "description": "读取项目目录",
  //项目入口文件，暂不清楚具体使用用途
  "main": "src/app.js",
  //命令行配置
  "bin": {
    "anydoor": "bin/anydoor"
  },
  //npm命令配置
  "scripts": {
    "start": "supervisor ./src/index.js",
    "eslint": "eslint ./src/**/*.js",
    "eslint-fix": "eslint --fix ./src/**/*.js",
    "stylelint": "stylelint ./src/**/*.scss",
    "stylelint-fix": "stylelint ./src/**/*.scss --fix"
  },
  //git钩子插件，在git commit之前执行，一般会将代码格式校验放在这一步，防止不规范代码被提交，需要安装pre-commit包
  "pre-commit": [
    "eslint",
    "stylelint"
  ],
  //git远程仓库
  "repository": {
    "type": "git",
    "url": "git+https://github.com/shangguanhonglei/anydoor.git"
  },
  // 关键字，和description配置功能类似
  "keywords": [
    "自由门"
  ],
  //作者
  "author": "lulin",
  //软件授权条款，MIT为众多软件授权条款中比较宽松的一种，在项目根目录下有一个LICENSE文件
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/shangguanhonglei/anydoor/issues"
  },
  "homepage": "https://github.com/shangguanhonglei/anydoor#readme",
  //开发环境所依赖npm包
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "pre-commit": "^1.2.2",
    "stylelint": "^10.1.0"
  },
  //生产环境所依赖npm包
  "dependencies": {
    "handlebars": "^4.1.2",
    "chalk": "^2.4.2",
    "yargs": "^13.2.4"
  }
}

npm包管理

npm包版本号规则

• 版本号x.y.z

z表示修改bug后升级，y表示功能迭代，x表示版本彻底升级并且不兼容之前的版本
1.2.*表示x和y位用固定的z位用最新的
～1.2.0等同^2.0.0表示x位大版本固定，y和z位版本用最新的

发布npm包

npm login //输入npm用户名和密码登录npm，此时不应使用cnpm
npm publish //推送项目，每次推送都需要升级版本
npm unpublish //删除已经发布的npm包

发布时如果有需要忽略的文件则需要在项目根目录下新建.npmignore文件，文件内容如下：

# 默认忽略node_modules，单元测试目录无需配置
node_modules
test
**其他需要忽略的文件及文件夹就必须进行配置**
.editorconfig
.eslintignore
.eslintrc.js
.vscode
.stylelintrc.json

安装npm包

npm install anydoor_test_lulin -g

命令行配置

在package中配置bin参数并且在根目录下新建bin目录

"bin": {
    "anydoor": "bin/anydoor"
}

在anydoor文件中写入下面两句代码

#!/usr/bin/env node
  require('../src/index')

npm发布完成之后执行npm install命令安装，安装完成之后在本地电脑就可以通过anydoor命令直接执行软件包