前端工程化---规范化标准

为什么要去做规范化

在开发一个大型应用之前，进行规范化标准的指定是必不可少的，千万不要嫌麻烦而忽略这项工作。否则等待你的将是一个无底洞的深渊。一个大型应用的开发不可能是你一个人独自进行，即使就算能力、精力超强，你一个人可以负责，但是你也要考虑到后续其他开发人员对你的项目进行维护。

ESLint

安装

• 作为项目内部的开发依赖进行安装

yarn add eslint -D

初始化

选择一个配置文件的模板，一共三种：

• To check syntax only （只检查语法错误）
• To check syntax and find problems （检查语法错误并找到问题代码—例如：定义未使用的变量就是问题代码）
• To check syntax, find problems, and enforce code style （检查语法错误、找到问题代码并且校验代码风格 ----代码风格：例如每行缩进，单层双引号等）
• 推荐使用第三种

yarn eslint --init

ESlint 与webpack集成

• 安装eslint-webpack-plugin插件

yarn add eslint-webpack-plugin -D

• 配置

const ESLintPlugin = require('eslint-webpack-plugin');

{
	plugins: [
		new ESLintPlugin({
            overrideConfigFile: require.resolve('../.eslintrc.js') // 指定一个eslint的配置文件(就是eslint初始化的时候，在根目录生成的.eslintrc.js文件)
        })
	]
}

stylelint

安装

yarn add stylelint stylelint-config-standard stylelint-config-sass-guidelines -D

配置

• 根目录下创建.stylelintrc.js配置文件

module.exports = {
    extends: [
        "stylelint-config-standard",
        "stylelint-config-sass-guidelines",
    ]
}

stylelint 与webpack集成

• 通过stylelint-webpack-plugin插件进行集成

yarn add stylelint-webpack-plugin -D

{
	 plugins: [
		new StylelintWebpackPlugin({
            configFile:require.resolve('../.stylelintrc.js')  // 指定一个stylelint的配置文件
        })
	]
}

prettier

• 自动格式化代码的工具

安装

yarn add prettier -D

配置

• 项目根目录下创建.prettierrc.js文件

{
  "printWidth": 100, //每行到多少长度开始折行
  "tabWidth": 2,
  "singleQuote": true, //单引号
  "trailingComma": "none", //数组、对象最后一个元素的尾逗号
  "bracketSpacing": true, //花括号前后空格
  "jsxBracketSameLine": true, //使多行JSX元素最后一行末尾的 > 单独一行
  "parser": "babel", //指定使用哪一种解析器
  "semi": true, //是否在行尾加分号
  "useTabs": true, //使用tab（制表符）缩进而非空格
  "arrowParens": "avoid", //只有一个参数的箭头函数的参数是否带圆括号（默认avoid不带）
  "jsxSingleQuote": true, //在JSX中使用单引号
  "htmlWhitespaceSensitivity": "ignore", //为 HTML 文件定义全局空格敏感度
  "quoteProps": "as-needed" //自定义引号配置
}

prettier与编辑器的集成

webstorm

webstorm默认支持prettier,无需额外进行配置 直接option+command+L进行格式化代码即可

vscode

• 安装Prettier - Code formatter插件
• 根目录下有.prettierrc.js配置文件
• 键盘使用Shift+Alt+F 格式化代码

git hooks

• 在代码提交之前强制lint一下
• 原理就是通过git提供的钩子来对提交前做一些操作
• 通过husky实行这个功能

安装

yarn add husky -D

使用

• 在package.json中添加husky字段
• 配置hooks属性
• hooks属性中添加pre-commit，其值是一个script命令，可以在git提交之前进行调用

{
	"husky": {
	    "hooks": {
	      "pre-commit": "yarn check"
	    }
  	}
}

lint-staged

• 与husky配合，在完成提交之前的eslint之后 可以继续一些其它额外的操作

安装

yarn add lint-staged -D

使用

• package.json新增lint-staged字段

{
	"lint-staged": {
	    "*.js": [
	      "eslint",
	      "git add "
	    ]
  	}
}

• 更改husky字段的值

{
	"husky": {
	    "hooks": {
	      "pre-commit": "yarn precommit"
	    }
  	}
}

• 更改script字段中的启动命令

{
	"scripts": {
	    "precommit": "lint-staged"
  	}
}