代码规范

代码规范

ESLint

基本概念

官网:
	https://eslint.org/

中文网址:
	http://eslint.cn/

基本概念:
	javascript代码检测工具，帮助我们统一团队的代码风格
	
优势:
	1、内置很多检查规则，同时支持自定义规则
	
	2、NodeJS开发的，方便安装
	
可配置的信息:
	Environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
	Globals - 脚本在执行期间访问的额外的全局变量。
	Rules - 启用的规则及其各自的错误级别。
	...
	
使用步骤:
	参考:http://eslint.cn/docs/user-guide/getting-started
	
	1、安装全局 eslint 包，或是本地安装
		npm i eslint -g
		注意：如果执行脚本写在package.json中，可以不用全局安装，本地安装即可
		但是如果要生成eslint的配置文件，必须安装全局包
	
	2、在项目根目录创建一个eslint的配置文件，并且进行配置
		使用 `eslint --init` 在项目根目录下创建一个 .eslintrc.js 的配置文件
		
		配置详见:http://eslint.cn/docs/user-guide/configuring
		
	3、在项目根目录创建.eslintignore 忽略掉不需要lint的目录
		
	4、安装项目依赖的包
		npm i eslint babel-eslint -D
		
	5、在package.json中配置scripts来验证
		"lint":"eslint src"
	
	6、在package.json中配置scripts来修复
		"fix":"eslint --fix src"
		注意:修复的只能是规则中，带有扳手标识的
		
	7、使用pre-commit第三方包，在提交git前，必须先验证通过
		

ESlint With Webpack【以Vue为例】

方式1：
	使用vue的脚手架，直接生成项目，即可完成eslint的配置
		vue init webpack vue_project
		
方式2：
	自己手工搭建Webpack + Vue的项目，然后自己手动的配置eslint
	
	步骤:
		1、切换到项目根目录，使用 `eslint --init` 生成eslint的配置文件
		
		2、安装依赖包，然后在.eslintrc.js配置文件中增加对vue的支持
			npm i eslint babel-eslint eslint-loader eslint-config-standard eslint-plugin-html -D
			
		3、在webpack开发阶段的配置文件中，进行配置
			参考:https://www.npmjs.com/package/eslint-loader
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
                options: {
                // eslint options (if necessary)
                }
            }
            
         4、在package.json中增加eslint的script 配置
         	"lint":"eslint --fix src --ext .js,.vue"
         	
         5、别忘加在项目根目录加上.eslintignore的忽略文件，并写好要忽略掉的目录
         	

StyleLint

基本概念

官网:
	https://stylelint.io/

基本概念:
    A mighty, modern CSS linter and fixer that helps you avoid errors and enforce       	consistent conventions in your stylesheets.
    一款强大的，时髦的css语法检查和纠错工具，它可以帮助开发者在编写样式文件时避免错误，同时它还可以强迫	   开发者们形成统一的开发规范。

基本使用:
	1、安装所需要的包 stylelint stylelint-config-standard
		npm i stylelint stylelint-config-standard -D

	2、在package.json中进行配置 stylelint 项目
    	"stylelint": {
            "extends": "stylelint-config-standard", 
            "rules": {
                "规则名称1":"规则值1",
                "规则名称2":"规则值2"
            }
        }

	3、写好要测试的样式文件 xxx.css xxx.less xxx.scss
		例如：在src的css文件夹创建样式文件
		
	4、在package.json的scripts中添加 stylelint 代码检查脚本
    	"scripts": {
           "stylelint": "stylelint src/css/*.* --fix"
        }
		
    5、切换到项目根目录，运行 `npm run stylelint`	

Stylelint With Webpack【以Vue为例】

1、先使用webpack + Vue 搭建好项目

2、安装所需要的包 style-loader css-loader less less-loader node-sass sass-loader stylelint stylelint-webpack-plugin stylelint-config-standard

3、在webpack的配置文件中，写好css、less、scss的loader配置
	参考:https://webpack.docschina.org/loaders/

4、在webpack的配置文件中，写好插件（stylelint-webpack-plugin）的代码
	const StyleLintPlugin = require("stylelint-webpack-plugin")
    
    plugins: [
        new StyleLintPlugin({
            context: "src",
            configFile: path.resolve(__dirname, './stylelint.config.js'),
            files: 'css/*.*',
            failOnError: false,
            quiet: true,
            fix:true, // 修复不规范的样式代码
            //syntax: 'less'
        })
    ]

5、在项目根目录下创建一个stylelint的配置文件 stylelint.config.js 并写好配置
	module.exports = {
        "extends": "stylelint-config-standard",
        "rules": {
            "color-no-invalid-hex": true,
            "规则名称1":"规则值1",
            "规则名称2":"规则值2"
        }
    }
	
6、在package.json中配置scripts脚本，启动项目
	"dev": "webpack-dev-server --progress --config webpack.config.dev.js --open --hot"

7、切换到根目录，运行启动脚本 `npm run dev` 即可