使用vscode工具在vue和react native项目上使用eslint和pre-commit

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Eslint及pre-commit的安装与使用（Vue）

一、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

    然后会给你一系列的提示来让你生成自己的代码约束，你也可以直接选择一个推荐代码约束风格。

  4. ESlint的使用:实时提示

    配置编辑器的插件设置。VS code 默认的ESlint的代码检查是关闭的，你可以在“首选项>>>>设置”里覆盖掉默认设置。如下图所示，设置自动检测：

    或者在settings.json里面直接代码设置：

    如上图注意所示，修改的是修改普通的语法错误，比如是“”改成单引号，代码出错是无法自动修改的，如下图所示：

    代码错误是无法自动修改以及提交时也会报错的，除非强制提交了。

    当然如果你自己不想让保存的时候给你自动修改你也可以不加eslint.validate这段代码，就是提交时修改语法错误了。

二、pre-commit的配置及使用(或者husky,RN例子用了这个)

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

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

  2. pre-commit的安装
    npm install --save-dev pre-commit

  3. pre-commit的配置

    在package.json里配置如下：

  4. pre-commit的使用

    在执行git commit 命令时会自动先执行之前的lint-staged下的命令，如果执行通过则提交，否则提交失败，并给出具体的提示。

React Native 项目的配置例子

公司新建的RN项目的package.json包含了eslint的插件和配置文件，因此直接npm install安装即可（如若其他途径，可自己百度搜索如何安装插件和配置）。

安装好node_modules以后，执行npm run lint即可查出错误结果(区别于vue，vue有热重载依赖插件vue-hot-reload-api，保存时即可重载刷新)：

接下来要进行的步骤是git hook在本地commit的时候有error无法提交。

  1. 安装
    方法一（husky）：npm i -D husky lint-staged
    方法二：npm install --save-dev pre-commit

    然后安装完成如下所示：

    方法一：

    方法二：

  2. 配置

    在package.json文件中加入以下代码：

    方法一：

    "scripts": {
      "precommit": "lint--staged",
    },
    "lint-staged": {
      "*.js": [
        "npm run lint",
        "git add"
      ]
    }

    方法二：

    "pre-commit": [
      "lint"
    ]

    然后进行commit操作的时候就会进行如下图所示的操作，最终也就是会提示你所有的错误（error）以及提交失败了，需要你自己修改错误（error）：

    方法一：


    方法二：

    上面的例子中我把故意加的未定义的ff去掉以后，再次进行commit，没有error了，即可提交成功了。

    方法一：

    方法二：

拓展-Prettier的使用，统一代码风格

1.什么是prettier?

prettier是一个javascript的格式化工具，可以完全统一整个团队的代码风格。执行一行命令，即可全局格式化代码，并统一风格。如下图所示：

2.ESLint 和 Prettier 的冲突

在用 Prettier 格式化的时候，可以能会和 ESLint 定义的校验规则冲突，比如 Prettier 字符串默认是用双引号而 ESLint 定义的是单引号的话这样格式化之后就不符合 ESLint 规则了。所以要解决冲突就需要在 Prettier 的规则配置里也配置上和 ESLint 一样的规则。

但是可以通过配置解决大部分冲突，但仍有一些是无法解决的，比如，Prettier 在 function 关键字后不允许有空格且不能自定义，那如果想避免 ESLint 不报错，只能配置 ESLint 允许 function 关键字后不带空格（主要针对匿名函数）。

这类不能配置的冲突很少，目前搜索到发现上述一例，所以，还是选择使用 Prettier，毕竟，更多的时候使用Prettier 很方便，并且，后续 Prettier 版本可能会添加更多自定义选项。

（ps:⚠️有人不建议将prettier的校验规则配置到eslint和airbnb或者standard的规则一起使用，这样有冲突！prettier遵从的是google的规范。具体如何自己去查询看看吧！）

3.安装

npm install --save-dev prettier

4.配置

A.根目录下新建 .prettierrc 文件

代码如下:

{
  "printWidth": 80,
  "tabWidth": 4,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "arrowParens": "always"
}

注释：

“printWidth”: 80, //一行的字符数，如果超过会进行换行，默认为80

“tabWidth”: 4, //设置工具每一个水平缩进的空格数

“useTabs”: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减

“singleQuote”: false, //字符串是否使用单引号，默认为false，使用双引号

“semi”: true, //在语句末尾使用分号，默认为true

“trailingComma”: “none”, //是否使用尾逗号，有三个可选值"<none|es5|all>"

“bracketSpacing”: true, //在对象字面量声明所使用的花括号后（{）和前（}）输出空格

“arrowParens”: “always” //为单行箭头函数的参数添加圆括号,always: (x) => x

更多配置规则：点击此处prettier配置规则

B.在package.json文件中加入以下代码

"scripts": {
  "prettier": "prettier --write src/**/*.js",
}

5.使用

命令行输入：npm run prettier

出现如下图所示修改：

然后有些规范区别就改变了，例如：




冲突问题——这之中需要注意的就是一开始所说的冲突问题：function () （eslint 推荐）和 function() （prettier 推荐） 的 function关键字后有无空格风格冲突问题。

疑难问题——：为何会有换行，该如何解决？暂未知,待解决……

6.Pre-commit and prettier

在commit前忘记去执行npm run prettier的话，那就在package.json里面配置：

"pre-commit": [
  "prettier",  //commit前执行prettier
  "lint"
]

步骤：1.git commit -m ‘test4’ -a


步骤：2.git commit -m ‘test5’ -a

步骤：3.git push

步骤：4.成功更新

以上是 使用vscode工具在vue和react native项目上使用eslint和pre-commit 的全部内容， 来源链接： utcz.com/z/375497.html

回到顶部