• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

前端技术进阶:代码规范

极客笔记 Geekerstar 5个月前 (12-17) 169次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

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)
Geekerstar
关于作者:
本站技术支持

您必须 登录 才能发表评论!

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

客服QQ


QQ:2248886839


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