1、gitignore相关
1、在github上创建node项目的时候,我们选择gitignore为node,那么我们在node项目中的logs,node_modules等文件是不会上传的,下面总结一下gitignore的相关规则
(1)匹配模式前/代表项目的根目录
(2)匹配模式最后加/代表是目录(node_modules/ 表示node_modules整个文件夹忽略掉)
(3)匹配模式前加!表示取反,就是不忽略,比如我们a文件夹下的b文件不忽略,那么在gitignore文件中忽略a文件夹,在a文件夹下面!b,就是说整个a文件夹只有b文件不忽略
(4)*代表任意个字符(*.log表示任意的.log文件都忽略掉,npm-debug.log*代表有的log文件后面还有日期,也要忽略掉)
(5)?匹配任意一个字符
(6)**匹配多级目录(node_modules/**/index.js表示node_modules多级目录下的index.js都忽略,比如node_modules文件夹下面有a,b,c三个文件夹,这三个文件夹下面都有.index.js文件,则ode_modules/**/index.js就是将a,b,c下面的index.js文件都忽略)
2、EditorConfig
1、EditorConfig是要来帮助开发者定义并持续保持代码风格的的工具,不论什么IDE只要有EditorConfig整个插件就能读配置文件。下面就直接展示一下实例文件
# EditorConfig is awesome: https://EditorConfig.org # top-most EditorConfig file root = true
#在打开文件时,EditorConfig插件会查找
#.editorconfig
#打开文件的目录中以及每个父目录中指定的文件。#.editorconfig
#如果到达根文件路径或#root=true
#找到EditorConfig文件,则搜索文件将停止。 # Unix-style newlines with a newline ending every file [*] //所有文件都匹配 end_of_line = lf //使用的是Unix风格 insert_final_newline = true //文件最后一个行要有回车 # Matches multiple files with brace expansion notation # Set default charset [*.{js,py}] // 所有的.js文件和.py文件都使用utf8的编码集 charset = utf-8 //使用的编码集为utf8 # 4 space indentation [*.py] // 所有python文件 indent_style = space //缩进方式使用空格 indent_size = 4 //4个空格为一缩进 # Tab indentation (no size specified) [Makefile] indent_style = tab # Indentation override for all JS under lib directory [lib/**.js] //lib文件下任意目录中的.js文件 indent_style = space //缩进方式使用空格 indent_size = 2 //2个空格为一缩进 # Matches the exact files either package.json or .travis.yml [{package.json,.travis.yml}] indent_style = space indent_size = 2
2,具体的规则可以上https://editorconfig.org/上去查看,有些规则和gitignore有些不一样,注意区分
3、ESlint(https://eslint.org/docs/user-guide/configuring)
1、ESLint是识别和报告ECMAScript / JavaScript代码中发现的模式的工具,其目标是使代码更加一致并避免错误。在很多方面,它与JSLint和JSHint类似,但有一些例外:
- ESLint使用Espree进行JavaScript解析。
- ESLint使用AST来评估代码中的模式。
- ESLint是完全可插入的,每个规则都是一个插件,您可以在运行时添加更多。
2、下面来简单的讲一下一个实例。我们一般的配置文件都放在ESlint.js或者.json中
module.exports={
"extends":["eslint:recommended"], //使用推荐风格,如果要覆盖推荐风格中的某些规则就在下面编写
"parser":"babel-eslint", //指定解析器
"rules":{
"no-console":["error",{ //这里有三个级别,我们这里写的error,就是你如果在代码中写了console就显示错误
"allow":["warn","error","info"] //不允许写console,但是可以写console.error,console.warn,console.info
}]
},
"parseOptions":{ //指定解析器的选项
"ecmaVersion":6, //指定ES6
"sourceType":"script" //正常的script
},
"globals":{ //脚本在执行期间访问的其他全局变量。
"window":true //window是browser的全局变量,这里作为node的额外全局变量
},
"env":{ //要指定配置文件中的环境
"node":true, //指定的node环境,也可以指定browser浏览器为true,则window为true
"es6":true,
"mocha":true,
}
}
2、在有的时候我们不得不对禁用我们设定的规则
要临时禁用文件中的规则警告,请按以下格式使用块注释:(假如我们之前设置了no-alert,加上下面这个注释我们语句不会报错)
/* eslint-disable */
alert('foo');
/* eslint-enable */
您还可以禁用或启用特定规则的警告:
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */
要在整个文件中禁用规则警告,请在文件/* eslint-disable */
顶部放置块注释:
/* eslint-disable */
alert('foo');
您还可以禁用或启用整个文件的特定规则:
/* eslint-disable no-alert */
alert('foo');
要禁用特定行上的所有规则,请使用以下格式之一的行或块注释:
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');
/* eslint-disable-next-line */
alert('foo');
alert('foo'); /* eslint-disable-line */
要禁用特定线路上的特定规则
alert('foo'); // eslint-disable-line no-alert
// eslint-disable-next-line no-alert
alert('foo');
alert('foo'); /* eslint-disable-line no-alert */
/* eslint-disable-next-line no-alert */
alert('foo');
要禁用特定行上的多个规则
alert('foo'); // eslint-disable-line no-alert, quotes, semi
// eslint-disable-next-line no-alert, quotes, semi
alert('foo');
alert('foo'); /* eslint-disable-line no-alert, quotes, semi */
/* eslint-disable-next-line no-alert, quotes, semi */
alert('foo');
所有上述方法也适用于插件规则。例如,要禁用eslint-plugin-example
的rule-name
规则,结合插件的名称(example
)和规则的名称(rule-name
)为example/rule-name
:
foo(); // eslint-disable-line example/rule-name
foo(); /* eslint-disable-line example/rule-name */
注意:为文件的一部分禁用警告的注释告诉ESLint不要报告禁用代码的规则违规。然而,ESLint仍然会解析整个文件,因此禁用的代码仍然需要语法上有效的JavaScript。
3、假如我们使用了eslint但是依然可以就不做修改就去提交,那么现在我们要实现不修改提示的错误就提交不了的目的。
首先在package.json中可以加入这样的代码
"scripts":{
"lint":"eslint .",
"fix":"eslint --fix ."
}
这样我们在命令行去执行 npm run lint 就会去校验我们的文件,看看是否都符合我们最开始指定的要求,也能通过npm run fix去进行错误修复,也就是我们有些代码不符合我们指定的要求,就会自动修复,但是前提是在eslint官网上这些前面带小扳手的规则才能自动修复
所以你出现像no-extra-parens这种错误,fix一下就好了,但是出现像no-func-assign这种错误就自动修复不了,还是会给你报错。
4、这样的设置还是没有达到出现错误不能提交的目的,我们都知道git有个钩子,就是在commit之前必须跑的一个命令,我们现在使用一个简单的方法,使用pre-commit第三方组件,就是在commit之前跑一些命令,这些命令没有跑成功就不允许commit,使用方法也很简单,就是安装之后在package.json中写上类似于下面的代码,在commit之前去跑scripts中的命令
5、注意我们在安装pre-commit的时候,要想一下,这个东西就是个验证代码的工具,我们在开发的时候是用的着的,我们在线上运行的时候还需要么?不需要,所以我们使用npm i pre-commit这个命令就将pre-commit安装到了package.json文件中的dependencies部分里,dependencies是项目运行时要依赖部分,所以我们的目的就是在开发的时候安装pre-commit,在线上运行就不需要安装,使用npm i --save-dev pre-commit这个命令,就将pre-commit安装到了devDependencies部分中
6、这样我们在git commit之前就会执行lint和fix命令,但是我们lint是去eslint .,就是就检查所有文件是否符合我们设置的JS规范,但是有的文件,像build,text这种不是js文件,我们就在.eslintignore文件中去设置。