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"

标签：选项,typescript,代码,配置,react,风格,eslint,true
来源： https://www.cnblogs.com/Mr-Hou88888/p/16163560.html