eslint php,eslint配置

首次发表在个人博客

eslint配置

全局安装

npm install -g eslint

局部安装

npm i -D eslint

接下来新建一个配置文件.eslintrc.js,或执行以下命令自动生成

eslint --init

制定环境

要指定配置文件中的环境，请使用env键并指定要启用的环境true。例如，以下启用浏览器和Node.js环境：

{

"env": {

"browser": true,

"node": true

}

}

或者在一个package.json文件中

{

"name": "mypackage",

"version": "0.0.1",

"eslintConfig": {

"env": {

"browser": true,

"node": true

}

}

}

配置规则

ESLint带有大量的规则。您可以使用配置注释或配置文件修改您的项目使用的规则。要更改规则设置，您必须将规则ID设置为以下值之一：

"off"或者0- 关闭该规则

"warn"或者1- 将规则打开为警告(不影响退出代码)

"error"或者2- 将规则打开为错误(触发时退出代码为1)

通过内联注释禁用规则

要在整个文件中禁用规则警告，请在文件/eslint-disable/顶部添加块注释：

/* eslint-disable */

alert('foo');

要禁用特定行上的所有规则，请使用以下格式之一的行注释：

alert('foo'); // eslint-disable-line

// eslint-disable-next-line

alert('foo');

制定全局

可以使用文件内部的注释或配置文件来定义全局变量。

1.使用文件内部注释

(1).要在JavaScript文件中使用注释来指定全局变量，请使用以下格式

/* global var1, var2 */

(2).如果你想要指定这些全局变量不应该被写入(只读)，那么你可以设置每个false标志：

/* global var1:false, var2:false */

2.要在配置文件中配置全局变量，请使用globals键并指示要使用的全局变量。将每个全局变量名称设置为等于true允许覆盖变量或false禁止覆盖。例如：

{

"globals": {

"var1": true,

"var2": false

}

}

使用心得

目前使用vscode,安装eslint插件,然后在配置中加入关于eslint的配置

{

"eslint.autoFixOnSave": true,

"eslint.enable": true,

"eslint.options": {

"extensions": [".js", ".vue", ".jsx"]

},

"eslint.validate": [

{

"language": "vue",

"autoFix": true

},

{

"language": "javascript",

"autoFix": true

},

{

"language": "javascriptreact",

"autoFix": true

}

],

}

"eslint.autoFixOnSave": true,配置完这个之后,当你在保存的时候可以自动按照你在.eslintrc.js目录中设置的规则自动修复一些空格缩进,单双引号及语句末尾是否需要加;或,的一些错误,但是有一些错误,比如变量声明未定义等得需要你手动去修改.

刚开始用到eslint的时候也是相当痛苦,毕竟在代码中看到一大堆红线(注: 红线为eslint的错误,鼠标划上去就会看到对应的违反了哪个规则,可以去eslint的官网查看),但是当你养成良好的习惯之后,这些习惯包括变量命名,函数命名等,其实会大大的提高工作效率,规范起来之后尤其会提高团队之前的工作效率.

我现在就有严重的代码洁癖,看到整洁的代码,心情就会十分愉悦.当然在看到团队有小伙伴一点都不注意这些,尤其需要忙他debug的时候,真的很难受,变量命名a,b, a1等.所以哪怕为了不坑团队成员的,也要养成良好的习惯.

参考