vscode 下使用eslint和prettier行代码格式化

大大源码 • 2023年3月20日 pm11:55 • 未分类

关于 ESLint

ESLint

ESLint 主要用来检查语法问题，例如：声明一个变量应该 const 还是 let ，使用的变量有没有声明等等，这一类的代码问题，可能会导致潜在的bug。

在VSCode 中使用ESLint

安装ESLint的npm包，npm install eslint --save-dev安装在当前项目内部，安装到全局也是可以的但不推荐；
初始化ESLint npx eslint --init 这个命令会生成对应的ESLint配置；
通过命令行检查对应的的文件。npx eslint yourfile.js，会输出该文件存在的问题，同时可以通过 --fix 来修复一些可以修复的问题；
安装VSCode的ESLint插件，安装插件之后就可以不需要通过命令行了，插件会在文件中将有问题的地方标识出来，还可以设置在保存文件的时候自动修复ESLint问题或者手动修复。

自动修复
在VSCode 的配置文件中添加如下配置，即可在保存文件的时候自动修复ESLint问题了。

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }, //  启用保存时自动修复,默认只支持.js文件

如何配置VSCode

手动修复

在VSCode的设置中开启下面这个配置，大意是将ESLint视为一个格式化器。
在这里插入图片描述
开启之后，在文件中右键点击选择使用...格式化文档，出现的列表中就有ESLint了，选择之后就会自动格式化代码了，还可以通过最后一个选项将ESLint设置为默认的格式化程序，从而通过快捷键快速调用ESLint。
在这里插入图片描述

初始化ESLint

上面的第二步中初始化ESLint如下：

npx eslint --init

F:\vscodeProjects\formate-code>npx eslint --init
? How would you like to use ESLint? ... 
  To check syntax only                               -- 只检查语法错误
> To check syntax and find problems        -- 检查语法错误和找出问题代码
  To check syntax, find problems, and enforce code style   -- 检查语法错误，找出问题代码，格式化代码风格

语法错误：比如const 写成了cosnt 这一类的，一旦写错了，代码是运行不了的（这是应该属于核心功能）；
问题代码：比如声明了变量却没有使用，引用了未定义的变量之类的问题，不一定会影响代码运行，但是可能存在潜在的bug；
代码风格：这个和Prettier 功能是相似的。就是TAB键占几个空格，单引号双引号什么的。但是两者应该并不是完全的重合的。
上面的如果你选择了第三个，后面还会出一个让你选择代码风格的问题，

选择使用的模块加载方法；
选择使用的框架；
是否支持TypeScript；
选择代码的运行环境 Node或者Browser；
选择配置文件的类型；

回答完上面的文件就会自动生成一个对应的配置文件了。

关于配置文件的类型
JSON文件是静态配置，
YAML没有用过， (*^▽^*)。
JavaScript 文件是动态的，可以添加判断什么的，运行的时候才可以拿到配置结果，它可以和各种打包工具灵活配合使用，但是可能会影响编辑器的检测错误，自动修复之类的功能。

ESLint和Prettier组合使用

详见Prettier的使用

ESLint 的具体使用

忽略规则

添加 .eslintignore 文件

在项目根目录添加 .eslintignore 在文件添加上需要忽略的文件或者文件夹即可。
```
// .eslintignore
webpack.config.js
src
```
在代码中忽略规则

在代码中可以通过注释来控制一些规则的生效与否

      debugger; // 报错
      var b = 1; // 报错
      /* eslint-disable */
      debugger; // 不报错
      var a = 1; // 不报错
      /* eslint-enable */
      debugger; // 报错
      var b = 1; // 报错
      /* eslint-disable no-debugger */
      debugger; // 不报错
      var c = 1; // 报错	
            /* eslint-env node, mocha */   <--- 指定环境  
      var m ;

eslint-disable,eslint-enable 都可以指定一些规则的生效与否，多个规则的时候用逗号分隔。不指定规则的时候默认全部规则。

在配置文件中关闭规则

配置文件中的 rules 属性就是用来控制各种规则开启以及关闭，设置报错的级别等等。
```
  // .eslintrc.js
  ...
    rules: {
    "no-console": "off", // eslint6 中将 no-console这个规则移出了推荐规则。
  }
  ...
```
“off” or 0 - turn the rule off
“warn” or 1 - turn the rule on as a warning (doesn’t affect exit code)
“error” or 2 - turn the rule on as an error (exit code is 1 when triggered)

eslint 的配置

全局变量

js 中我们使用一些全局变量的时候 eslint 可能提示，变量未定义之类的错误。我们可以注释或者配置告诉 eslint 那些变量是全局变量。

指定环境
在配置文件中指定环境，就可以使用这个ESLint内部为这个环境预定义的变量了。

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  }
 }

通过注释指定全局变量
```
b = 1; // 报错
/* global b:writable  */
b = 1; // 不报错
```
默认情况下全局变量是只读的，如果我们只配置/* global b*/ 此时 eslint 则会提示全局变量是只读的不可以赋值。所以这里增加了一个参数 writable。如果没有给全局变量赋值，只是取值则不需要增加这个参数。

在配置文件中指定全局变量

配置文件中的 globals 属性就是用来配置全局变量的。

// .eslintrc.js
...
globals: {
  a: "readonly",
  b: "writable",
  "Promise": "off"    禁止使用此环境变量
},
...

定义 eslint 规则

使用配置包

ESLint 中我们可以使用别人已经定义好的规则集（配置包）。而不用一个一个的再 rules 中添加规则。
```
// .eslintrc.js
...
extends: "eslint:recommended", // 使用官方推荐配置
...
```
使用其它的配置包的时候，首先需要安装配置包，配置包的命名规则是 eslint-config-*，例如 eslint-config-standard 以及 eslint-config-vue，安装之后，在配置增加即可，在 extends 属性中可以省略前缀 eslint-config-。
```
// .eslintrc.js
...
extends: ["eslint:recommended","standard"],  // 引入额外的配置包
...
```
使用插件配置

插件则是以 eslint-plugin-开头。安装相关插件后，在 plugins 中引入，然后在rules中声明之后就可以使用了，也可以 extends 中增加配置批量使用插件中的规则。例如 eslint-plugin-vue，
```
// .eslintrc.js
  extends: ["plugin:vue/essential"],
  plugins: ["vue"],
```
自定义规则

如果要自定义规则我们首先要通过 plugins 插件创建一个规则。文档

/**
 * @fileoverview var to let
 * @author li
 */
'use strict';

//------------------------------------------------------------------------------
// Rule Definition
//------------------------------------------------------------------------------

/**
 * @type {import('eslint').Rule.RuleModule}
 */
module.exports = {
  meta: {
    type: 'suggestion', // `problem`, `suggestion`, or `layout`
    docs: {
      description: 'var to let',
      category: 'Fill me in',
      recommended: false,
      url: null, // URL to the documentation page for this rule
    },
    fixable: 'code', // Or `code` or `whitespace`
    schema: [], // Add a schema if the rule has options
    messages: {
      avoidName: "不允许使用 {{ name }} 作为变量名 Avoid using variables named '{{ name }}'",
    },
  },

  create(context) {
    // variables should be defined here

    console.log(context, 'this is form eslint ');
    //----------------------------------------------------------------------
    // Helpers
    //----------------------------------------------------------------------

    // any helper functions should go here or else delete this section

    //----------------------------------------------------------------------
    // Public
    //----------------------------------------------------------------------

    return {
      Identifier(node) {
        if (node.name === 'foo') {
          context.report({
            node,
            messageId: 'avoidName',
            data: {
              name: 'foo',
            },
            fix: function (fixer) {
              return fixer.insertTextAfter(node,"xx;")
            },
          });
        }
      },
      // visitor functions for different types of nodes
    };
  },
};