eslint选项和配置

发布时间:2022-06-08 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了eslint选项和配置脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

npx eslint --inIT

你想使用哪种模式

eslint选项和配置

 

 

 

1.只是对语法进行一个简单的检查

2.检查语法,并且会帮你找到对应的错误

3.检查语法,找到错误,并且还会强制你使用某种代码风格(要求必须符合某一种代码风格)

 

项目中使用哪种模块化

eslint选项和配置

1.支持ESModules

2.支持commonJS

3.以上均不选择(一般不会选择这个)

 

当前你使用了哪种框架

eslint选项和配置

 

项目中也没有用到TS

eslint选项和配置

 

你的代码运行在哪里?

eslint选项和配置

 

 

 1.浏览器

2.Node

 

生成的配置文件是什么格式的

eslint选项和配置

 

 

 1.js

2.yaml

3.json

 

那么我们的配置文件就生成了

module.exports = {//环境,eslint所检测的代码运行在什么环境
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },  
    "parserOptions": {    //ECAM规范的版本:latest最新的
        "ecmaVersion": "latest",    //使用哪一个js编译器对代码进行检测,默认值,可写,可不写     "parser":"esPRee",
    },
    "rules": {
    }
}
eslint也会用到编译器,也会对代码进行校验,看代码符不符合规范
eslint如何对代码进行校验:先把校验的代码,通过js编译器(espree),做词法分析,语法分析,转换成AST 进行检测,如果检测出来有问题给你提示一些相关的信息

 可以参考另外一篇文章:(36条消息) Eslint实现原理_还好一、、的博客-CSDN博客_eslint原理

 

当我们选择第二种模式,选择的框架为react,并且选择了TS,会提示我们要不要安装对应的包(对ts,react进行检查要用到的包)

eslint选项和配置

 

 

yes就行了

所生成的文件

module.exports = {  //环境
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },  //继承,eslint的规则可以继承其他一些规则的配置信息
    "extends": [     //eslint推荐的规则
        "eslint:recommended",     //react的规则
        "plugin:react/recommended",    //ts推荐规则
        "plugin:@tyPEscript-eslint/recommended"
    ],  //编译器
    "parser": "@typescript-eslint/parser",  //
    "parserOptions": {    //ecma的特性,jsx的特性
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest"
    },  //所应用的插件
    "plugins": [    //简写,实际上应用的是eslint-plugin-react
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

 

 

如果我们选择了第三种强制代码风格,使用的模块化为commonjs,框架为vue,ts

eslint选项和配置

 

 

 使用什么样的方式定义代码风格

1.流行代码风格的指导

2.它会问你些问题,根据你的问题使用哪种代码风格

如果我们使用了第一个,他会问你使用哪种代码风格

eslint选项和配置

 

 

1.爱彼迎的代码风格(居多)

2.标准的代码风格

3.谷歌的代码风格

4.XO严格的代码风格

 

eslint选项和配置

 

 

 根据选择检测到对应的配置,进行安装,直接yes

生成的配置文件

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/essential',  //爱彼迎的规范
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
  },
  plugins: [  //eslint-plugins-vue的简写
    'vue',
    '@typescript-eslint',
  ],
  rules: {
  },
};

 

如果报错不能使用esmodule的话需要在ParserOptions中加上

 "sourceType":"module"

脚本宝典总结

以上是脚本宝典为你收集整理的eslint选项和配置全部内容,希望文章能够帮你解决eslint选项和配置所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。