Have you been trying ESlint for as long as I have? Just configure a code formatting tool that easily relies on a few dozen. Dependencies depend on each other, and the incorrect version or configuration sequence will result in failure.

Even if you’ve mastered ESLint configuration, you’ll have to reconfigure it when you change projects. If you switch from React to the Vue project, the situation is even worse as you have to do some extra configuration work that is meaningless. The @Youngjuning/esLint-config-Airbnb plugin I’m here with today is a plugin to take the hassle out of esLint configuration.

introduce

A powerful EsLint configuration plugin based on Airbnb that supports VUE, JSX, JS, TS, TSX, HTML, jEST, and is designed to free you from the complicated esLint configuration work.

The installation

First, to avoid conflicts, remove the existing configuration from the project, you can keep rules

$ yarn add -D @youngjuning/eslint-config-airbnb
Copy the code

configuration

Add to your eslint config (.eslintrc.js):

module.exports = {
  root: true.  extends: '@youngjuning/airbnb'.}
Copy the code

react native

module.exports = {
  root: true.  extends: '@youngjuning/airbnb'.  env: {
    'react-native/react-native': true. }, } Copy the code

vue with typescript

module.exports = {
  root: true.  extends: '@youngjuning/airbnb'.  parserOptions: {
    parser: '@typescript-eslint/parser'. }, } Copy the code

More and more

.eslintignore

! .eslintrc.js! .prettierrc.jsCopy the code

.prettierrc.js

module.exports = {
. require('@youngjuning/eslint-config-airbnb/.prettierrc.js'),
}
Copy the code

.prettierignore

**/node_modules/*
Copy the code

.editorconfig

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true  [*.md] trim_trailing_whitespace = false  [*.gradle] indent_size = 4  [BUCK] indent_size = 4 Copy the code

yorkie & lint-staged 

$ yarn add -D yorkie lint-staged
Copy the code
{
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
 "*.{js,jsx,ts,tsx}": [  "eslint --fix". "git add" ]. // you can add wxml/html...  "*.{less,md,json}": [  "prettier --write". "git add"  ]  }, } Copy the code

This article was first published in Yang Junning’s blog. It is not easy to create. Your like 👍 is the motivation for me to persist