Eslint、gitignore及pre-commit的安装与使用

ESLint与Pre-commit配置

最新推荐文章于 2025-06-17 23:54:51 发布

weixin_30335353

最新推荐文章于 2025-06-17 23:54:51 发布

阅读量259

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/JessicaIsEvolving/p/9520441.html

本文介绍了ESLint的安装与使用方法，包括如何通过命令行工具进行代码检查，以及如何在Visual Studio Code中配置实时提示。同时，文章还介绍了如何使用pre-commit进行提交前的代码风格检查。

一、ESlint的使用

(1)ESlint是用来做什么的？

ESlint官网介绍是可组装的JavaScript和JSX检查工具。简单点来说，就是检查并约束代码风格，使之保持一致。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

(2) ESlint的安装

a.通过npm安装

npm install eslint -g

注:配置ESLint的项目中需要设置好该项目的 package.json 文件，如果没有的话可以使用 npm init来设置

b.安装Visual Studio Code ESlint插件

(3) 初始化

安装成功后，用命令行工具进入到需要引入ESLint的项目的目录中，然后输入下面的命令进行ESLint的初始化操作：

eslint --init

然后会给你一系列的提示来让你生成自己的代码约束，你也可以直接选择一个推荐代码约束风格，我录制了一个小视频供你参考:

视频链接:http://ozqubi472.bkt.clouddn.com/eslint-init-video.mp4

初始化命令成功后会在你本地的项目路径下生成一个你预期类型(json，js，yaml)的文件(在执行eslint --init有让你选择你要以哪种文件类型保存配置)。当然你也可以在package.json里配置key为eslintConfig的对象，但为了保持package.json的简单易懂不推荐这样做。
下面是根据上面视频操作生成的.eslintrc.js文件

//.eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 2016
    },
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

ESlint被完全设置为可配置的，主要包括以下信息。

a. 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
b.- 脚本在执行期间访问的额外的全局变量。
c.启用的规则及其各自的错误级别。

(4)ESlint的使用

a.通过命令行使用
你可以在项目的package.json的文件里配置script命令，然后通过执行特定的命令“npm run lint”来检查代码。

//package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint .",
    "fix": "eslint --fix ."
  }

b.实时提示

上面通过命令来检查的的方式每次都要手动执行，太麻烦，有没有可以实时提示的方法，我写一行有错误编辑器就实时提示。这个就要配置编辑器的插件设置了。VS code 默认的ESlint的代码检查是关闭的，你可以在“首选项>>>>设置”里覆盖掉默认设置。如下图所示:

(5)ESlint的规则

a.除了默认的规则，你可以自定义规则来覆盖推荐规则。

b.每条规则有3个等级：off、warn和error。off表示禁用这条规则(分别对应0，1，2)，warn表示仅给出警告，并不会导致检查不通过，而error则会导致检查不通过。

c.有些规则还带有可选的参数，比如no-console可以写成:

//不允许console.log(),但允许使用console.warn(),console.error(),console.info()
"no-console":[
“error”，{
    “allow”:[“warn”,"error","info"]
}
]

d.我们还可以使用一些注释在页面中的某个位置关掉eslint的检查。如图所示，node环境下的documnent是未定义的，所以代码检查通不过，所以要加上‘ /eslint no-undef: "off"/’，这样就可以通过了。

const srcs = await page.evaluate(() => {
  /*eslint no-undef: "off"*/
   const images = document.querySelectorAll('img.main_img');
   return Array.prototype.map.call(images, img => img.src);
});

更多ESlint的规则的使用请参考http://eslint.cn/docs/rules/。

二、pre-commit的配置及使用

(1)pre-commit是用来做什么的？

有了ESlint我们可以做代码风格的约束，但如果程序员gg/mm没有遵守团队的代码规范，对于给出的提示也没有理会，强制提交到服务器上也能成功，这似乎不太友好。而pre-commit就是用来做提交前的代码风格检查的，如果不符合风格就会提交失败，并给出对应的提示。

(2)pre-commit的安装

npm install --save-dev pre-commit

(3)pre-commit的配置

在package.json里配置如下

 "pre-commit": [
    "fix",
    "lint"
  ]

(4)pre-commit的使用

在执行git commit 命令时会自动先执行之前的“fix”和“lint”命令(钩子函数)，如果执行通过则提交，否则提交失败，并给出具体的提示。

三、gitignore的配置

(1) gitignore是用来做什么的？

在上传代码至服务器的过程中，有些文件是不需要上传的，这个时候我们可以通过在项目路径下创建一个名为‘.gitignore’的文件来配置要忽略哪些文件。

(2) 配置规则

匹配模式前/代表项目根目录
匹配模式最后加/代表目录
匹配模式前加!代表取反
*代表任意个字符
？匹配任意一个字符
**匹配多级目录

(3) 配置demo
下面给一个示例配置，实际开发过程中要以具体的业务需要为主。

logs
*.log
npm-debug.log
node_modules/
*.swp
.idea/
.vscode/
.DS_Store
build/
images/

转载于:https://www.cnblogs.com/JessicaIsEvolving/p/9520441.html