• 极客文库-知识库上线!
  • 极客文库小编@勤劳的小蚂蚁,为您推荐每日资讯,欢迎关注!
  • 每日更新优质编程文章!
  • 更多功能模块开发中。。。

前端技术进阶:代码规范

文章目录[隐藏]

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` 即可

https://segmentfault.com/a/1190000009077086?from=timeline&isappinstalled=0


丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:前端技术进阶:代码规范
喜欢 (0)
[247507792@qq.com]
分享 (0)

欢迎 注册账号 登录 发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ

247507792

工作时间:09:00-23:00

新浪微博:点我访问

个人博客:点我访问