作者
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”(script language),指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序(比如浏览器)的“脚本”。 JavaScript 只合适嵌入更大型的应用程序环境,去调用宿主环境提供的底层 API。 目前,已经嵌入 JavaScript 的宿主环境有多种,最常见的环境就是浏览器,另外还有服务器环境,也就是 Node 项目。
目录
ESLint
落霞与孤鹜齐飞 7月3日 13 1 0 13 1 0

到底用单引号还是双引号?

到底代码行结束是否需要分号?

到底用两个空格还是四个空格?

……

团队中经常有这样的分歧,看到和自己的规范不一样的代码总是浑身不自在。

于是出现了ESLint来统一规范

ESLint 通过静态代码分析可以快速发现代码中的问题,并且 ESLint 发现的很多问题都可以自动修复,团队还可以定制 ESLint 检查规则

下面重点说下ESLint配置

新建一个目录

  • 运行 npm init -y 生成 package.json 文件
  • 运行 npm install eslint —save-dev
  • 运行 npx eslint —init 生成一个 ESLint 配置文件 .eslintc.js
    module.exports = {
    env: {
      es2021: true,
    },
    extends: 'eslint:recommended',
    parserOptions: {
      ecmaVersion: 12,
    },
    rules: {},
    };
    
  • 新建一个 index.js 文件,随便写点代码
    const x = 1
    
  • 运行 npx eslint index.js 命令对文件进行检查
    会报错:’x’ is assigned a value but never used no-unused-vars
  • 修改下配置文件和index.js
    rules: {
      semi: ['error', 'always'],
      quotes: ['error', 'single'],
    },
    
    const x = "1"
    
    这时就会增加报错
    String must use singlequote quotes
    Missing semicolon semi

规则如何配置可以查看:https://eslint.org/docs/rules

  • 遇到错误可以手动修复,可以运行 eslint —fix 自动修复可修复部分,如空格、分号等问题,当申明变量未使用不能自动修复

  • 使用一些 ESLint 的推荐配置,如
    eslint-config-airbnb: Airbnb 公司提供的配置集
    eslint-config-prettier: 使用这个配置集,会关闭一些可能与 Prettier 冲突的规则
    eslint-config-react: create react app 使用的配置集
    eslint-config-vue: vuejs 使用的配置集

    module.exports = {
    extends: "eslint:recommended"
    }
    

更多配置可在 rule 里面自行配置

后面有时间会结合vue react脚手架写一些eslint配置、提交代码前的检验等等。

扫码分享到移动端
0 条评论
快来写一写读后感吧~
参与评论互动
登录即可参与评论互动哦