vscode 下使用eslint和prettier行代码格式化
关于 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的设置中开启下面这个配置,大意是将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组合使用
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)
全局变量
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
};
},
};
eslint-config-* 和 eslint-plugin- * 这两类软件包的区别,config类的软件包用于扩展配置文件所以只是修改了config,plugin类的则在扩展配置文件的同时提供一些自定义的ESLint规则,plugin类的一般会包含config类的。
关于 ESLint 的使用
想要在 webpack 中使用还需要安装 eslint-loader 但是不推荐在 webpack 构建过程中进行 ESLint 代码检查,会导致的构建时间大大延长。
ESLint 的检查应该在之前的步骤中进行处理,例如:通过插件在编辑器中实时检测问题并修复。也可通过工具在 git 提交的时候进行检查。
在 package.json 增加脚本 "lint":"eslint src"
,可以随时用来检查自己工程中的问题,并及时修复。vscode插件只会检测工作区的问题,对于没有打开的文件不会提示 eslint 错误。