Node.js之Web开发入门(项目初始化)-No.4

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-examplerule-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文件中去设置。

猜你喜欢

转载自blog.csdn.net/weixin_37968345/article/details/80843536