Java教程

eslint选项和配置

本文主要是介绍eslint选项和配置,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

npx eslint --init

你想使用哪种模式

 

 

 

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

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

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

 

项目中使用哪种模块化

1.支持esModules

2.支持commonJS

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

 

当前你使用了哪种框架

 

项目中也没有用到TS

 

你的代码运行在哪里?

 

 

 1.浏览器

2.Node

 

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

 

 

 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进行检查要用到的包)

 

 

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

 

 

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

1.流行代码风格的指导

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

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

 

 

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

2.标准的代码风格

3.谷歌的代码风格

4.XO严格的代码风格

 

 

 

 根据选择检测到对应的配置,进行安装,直接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选项和配置的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!