Add ESLint Rules to a `react-blessed` Application

栏目: IT技术 · 发布时间: 3年前

内容简介:The above video is hosted onThis is the 2nd post in a series where we will be creating a developer dashboard in the terminal using... ~20 more lessons to come ...

The above video is hosted on egghead.io .

This is the 2nd post in a series where we will be creating a developer dashboard in the terminal using react-blessed and react-blessed-contrib . We will discuss various ways to layout the dashboard, show how to change fonts, style with colors, and position text within each widget. Then we will shift focus to create widgets to display developer content such as an interactive time log, a pomodoro timer, displaying recent commits, showing currently running docker containers, and more. Once you know the basics you can create a widget of your own to add to the dashboard.

  1. Bootstrap a react-blessed Terminal Application
  2. Add ESLint rules to a react-blessed app (this post)

... ~20 more lessons to come ...

NOTE: You can find the code for this project in GitHub and you watch the whole Build a Terminal Dashboard with React video series on egghead.io .

Why ESLint?

If we come to the terminal and run npm start , you'll see the app kick-up and display the current date, time, and a counter.

Add ESLint Rules to a `react-blessed` Application

This code at this point in the React Terminal Dashboard series is minimal, but as code starts to accumulate it'll be helpful to statically analyze the validity of our code going forward with ESLint .

Installing the Dependencies

First we'll install eslint (for basic JavaScript litning), eslint-plugin-react (for rules specific to React components), and eslint-plugin-react-hooks (for rules regarding the use of React hooks).

npm install eslint{,-config-react-app,-plugin-react,-plugin-react-hooks}

NOTE: I'm using Bash Brace Expansion , which expands out to npm install eslint eslint-config-react-app eslint-plugin-react eslint-plugin-react-hooks

ESLint Initialization

Once installed, we'll use npx to execute the locally installed version of eslint and pass the --init flag to start a series of prompts to help initialize our ESLint configuration.

npx eslint --init

You'll be asked a whole list of questions, but once the prompts are completed, you'll have a new .eslintrc.js file in the root of your app folder.

Add ESLint Rules to a `react-blessed` Application

ESLint Config Modifications

Since we want to add some specific rules for React Hooks ( eslint-plugin-react-hooks ), we'll manually tweak the .eslintrc.js file.

To do that, we'll add react-hooks to our plugins array and we'll add two new rules, react-hooks/rules-of-hooks which we'll mark as an "error" if they are found, and react-hooks/exhaustive-deps which we'll mark as a "warning" if a violation is found.

module.exports = {
  env: {
    node: true,
    es2020: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 11,
    sourceType: 'module',
  },
  plugins: ['react', 'react-hooks'],  rules: {
    'react-hooks/rules-of-hooks': 'error',    'react-hooks/exhaustive-deps': 'warn',  },
};

NOTE: Instead of extending the recommended rules for ESLint and eslint-plugin-react , you maybe want to tweak which rules you and your team prefer.

Create a Lint NPM Script

Now, let's switch to our package.json file, where we'll create a new npm script called lint that will kick up the locally installed eslint module and run the linter against the code in the current directory.

{
  "name": "egghead-playlist-react-blessed",
  "main": "index.js",
  "scripts": {
    "start": "node index",
    "lint": "eslint ."  }
}

Once the npm script is defined you can execute the script by running npm run lint from the terminal.

Add ESLint Rules to a `react-blessed` Application

ESLint VS Code Extension

Seeing linting output in the terminal is great, but it's also handy to be able to see warnings and errors directly in your IDE. Most popular code editors have an ESLint extension available to install that will detect an ESLint configuration file and visually indicate violations within the editor. I have the ESLint Extension installed in VS Code.

Add ESLint Rules to a `react-blessed` Application

Conclusion

As your application grows it's can be helpful to add ESLint to statically analyize your codebase for common error and recommendations. Using the eslint init tool is a helpful way to get started.


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Learning PHP, MySQL, and JavaScript

Learning PHP, MySQL, and JavaScript

Robin Nixon / O'Reilly Media / 2009-7-21 / USD 39.99

Learn how to create responsive, data-driven websites with PHP, MySQL, and JavaScript - whether or not you know how to program. This simple, streamlined guide explains how the powerful combination of P......一起来看看 《Learning PHP, MySQL, and JavaScript》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

MD5 加密
MD5 加密

MD5 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具