首页 > 其他分享> 文章详细

eslint选项和配置

2022-04-19 01:34:07 阅读：228 来源： 互联网

标签：选项 typescript 代码配置 react 风格 eslint true

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

eslint选项和配置

npx eslint --init