模块化开发与规范化标准

模块化开发与规范化标准

为什么要有规范标准

软件开发需要多人协同

不同的开发者具有不同的编码习惯和喜好

不同的喜好增加项目维护成本

每个项目或者团队需要明确统一的标准

哪里需要规范化标准

代码、文档、甚至是提交日志

开发过程中人为编写的成果物

代码标准化规范最为重要

实施规范化的方法

编码前人为的标准约定

通过工具实现Lint

常见的规范化实现方式

ESlint 工具使用

定制ESlint校验规则

ESlint 对TypeScript的支持

ESlint 结合自动化工具或者Webpack

基于ESlint 的衍生工具

Stylelint 工具的使用

ESlint 介绍

最为主流的javascript lint 工具监测js代码质量

ESlint 很容易统一开发者的编码风格

ESlint 可以帮助开发者提升编码能力

ESlint

初始化项目

安装ESlint 模块开发依赖

通过CLI命令验证安装结果

npm init --yes

npm install eslint --save-dev

查看版本

.\eslint --version

npx eslint --version 需要安装最新版本的npm工具

yarn eslint --version

ctrl+k ctrl+0 折叠所有的代码

eslint 结合自动化工具

初始化，创建eslintrc.js文件

npx eslint --init

在gulpfile.js中使用

.pipe(plugins.eslint())

.pipe(plugins.eslint.format())

.pipe(plugins.eslint.failAfterError())

eslint 结合webpack配置

增加eslint-loader

.eslintrc.js

增加

rules:{

​	'react/jsx-uses-react':2, //react 定义却未使用

​	‘react/jsx-uses-vars’:2  //app中报错

}

plugins:[

​	'react'

]

现代化项目集成ESlint

vue-cli

npm install @vue/cli -g 

vue create syy-vue-app

ESlint 检查 typeScript

.eslintrc.js

parser:'@typescript-eslint/parser'

parserOptions:{

​	ecmaVersion:11

}

styleLint

npm install stylelint-config-standard -D

stylelintrc.js中配置

module.exports = {

​	extends:[
    	'stylelint-config-standard',
    	'stylelint-config-sass-guidelines'
    ]

}

npm install stylelint-config-sass-guidelines -D

Prettier 的使用

前端文件自动格式化

.vue .html .package.json .jsx .js .css .scss

npm installl prettier 

文件内容打印在终端中

npx prettier style.css  

覆盖源文件

npx prettier style.css --write  

将所有的文件格式化

npx prettier . --write

Git Hooks介绍

Git Hooks 也称之为git 钩子 ，每个钩子都对应一个任务

通过shell 脚本可以编写钩子任务触发时要具体执行的操作

ESlint 结合Git Hooks

Husky可以实现Git Hooks的使用需求

"husky":{

​	"hooks":{

​		"pre-commit":"npm run test"

​	}

}

"lint-staged":{

​	"*.js":[

​		"eslint",
		"git add"
​	]

}