[JavaScript知识库]企业化npm私服搭建&Eslint规范统一 - Eslint规范及commit提交校验

上一篇我们自己搭建了npm私服，这一篇我们将基于npm私服务进行Eslint的规则集扩展
上篇链接:企业化npm私服搭建&eslint规范统一 - npm私服
首先我们基于腾讯的eslint规则进行改造
eslint-config-alloy gitHub地址
基于eslint-config-alloy做修改
发布到npm私服上时候 需要修改eslint-config-alloy根目录下.npmrc修改成自己私服地址，然后进行发包
clone项目和修改后包发布 就不过多说了
一、我们如何使用自己在私服发布的包
在项目根目录创建.npmrc和.yarnrc
.npmrc:

@包前缀:registry=私服的源

.yarnrc:

"@包前缀:registry" "私服的源"

在使用npm私服发包时候建议使用包前缀 可以有效的分离开那些包需要在私服中下载
添加包前缀方法修改package.json里的"name": “@前缀/包名”

二、集成和使用eslint-config-alloy规则集
我们公司技术栈主要Vue3为主，今天简单介绍下Vue3的集成方法，React和Vue2可以参考eslint-config-alloy文档进行集成
node版本：Node v16+ | | ^v14.17.0(LTS版本)
Vue3.0使用eslint-config-alloy
npm下载：

npm install --save-dev @包前缀/eslint-config-alloy eslint@7.32.0 @babel/eslint-parser vue-eslint-parser eslint-plugin-vue 

yarn下载:

yarn add --dev @包前缀/eslint-config-alloy eslint@7.32.0 @babel/eslint-parser vue-eslint-parser eslint-plugin-vue

修改.eslintrc.js文件
如@包前缀/eslint-config-alloy
eslint引入规则可以省略eslint-config,直接写@包前缀/alloy

module.exports = {
  extends: [
    '@包前缀/alloy',
    '@包前缀/alloy/vue'
  ],
  env: {
    // 你的环境变量（包含多个预定义的全局变量）
    //
    // browser: true,
    // node: true,
    // mocha: true,
    // jest: true,
    // jquery: true
  },
  globals: {
    // 你的全局变量（设置为 false 表示它不允许被重新赋值）
    //
    // myGlobal: false
  },
  rules: {
    // 自定义你的规则 
  },
}

Vue3+Ts使用eslint-config-alloy
npm下载：

npm install --save-dev @包前缀/eslint-config-alloy  eslint@7.32.0 typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin @babel/eslint-parser vue-eslint-parser eslint-plugin-vue

yarn下载:

yarn add --dev @包前缀/eslint-config-alloy  eslint@7.32.0 typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin @babel/eslint-parser vue-eslint-parser eslint-plugin-vue 

修改.eslintrc.js文件

module.exports = {
  extends: [
    '@包前缀/alloy',
    '@包前缀/alloy/vue',
    '@包前缀/alloy/typescript'
  ],
  env: {
    // 你的环境变量（包含多个预定义的全局变量）
    //
    // browser: true,
    // node: true,
    // mocha: true,
    // jest: true,
    // jquery: true
  },
  globals: {
    // 你的全局变量（设置为 false 表示它不允许被重新赋值）
    //
    // myGlobal: false
  },
  rules: {
    // 自定义你的规则 
  },
}

三、编译器安装Prettier - Code formatter 并创建.prettierrc.js

// .prettierrc.js
module.exports = {
  // 一行最多 120 字符
  printWidth: 120,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾需要有逗号
  trailingComma: 'all',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  bracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // vue 文件中的 script 和 style 内不用缩进
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf
  endOfLine: 'lf',
  // 格式化内嵌代码
  embeddedLanguageFormatting: 'auto',
};

VSCode 的一个最佳实践
在项目根目录创建.vscode/settings.json 来支持自动修复 Prettier 和 ESLint 错误：

{
  "files.eol": "\n",
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

四、不想eslint校验阻断代码运行在vue.config.js中添加 lintOnSave:false,
五、commit前风格规范检查。
npm:

npm i  prettier husky lint-staged @commitlint/config-conventional @commitlint/cli -D

yarn:

yarn add --dev eslint-plugin-prettier eslint-config-prettier prettier husky lint-staged @commitlint/config-conventional @commitlint/cli

package.json文件添加配置

	"lint-staged": {
        "*.{js,jsx,tsx,ts,vue}": [
            "prettier --write",
            "eslint --ext .js,.jsx,.ts,.tsx"
        ]
    }

在项目根目录创建commitlint.config.js文件，内容如下

module.exports = {
    extends: ['@commitlint/config-conventional'],
}

初始化husky

npx husky-init

修改自动生成的.husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install lint-staged

使用husky生成commit-msg文件

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
# or
yarn husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

Git 正确提交格式：

git commit -m "${type}: ${subject}"

type指本次提交的类型，为必填项，必须为以下之一：
feat: 一项新功能
fix: 一个错误修复
docs: 仅文档更改
style: 不影响代码含义的更改（空白，格式，缺少分号等）
refactor: 既不修正错误也不增加功能的代码更改（重构）
perf: 改进性能的代码更改
test: 添加缺失或更正现有测试
build: 影响构建系统或外部依赖项的更改（gulp，npm等）
ci: 对CI配置文件和脚本的更改
chore: 更改构建过程或辅助工具和库，例如文档生成
subject指本次提交的简要描述，它有如下两个规则。
不要大写第一个字母
末尾没有点（.）
:后有一个空格！！！