裝它|不再用操心ESLint配置

你們是否像我同樣苦 ESlint 久已呢？只是配置一個代碼格式化工具，動輒10幾個依賴。依賴之間又相互依賴，版本錯誤，配置順序錯誤都會致使失效。

就算熟練掌握了 ESLint 配置，可是換了項目，又要從新配置。若是是從React切換到Vue項目，狀況會更糟糕，你不得不額外作一些無心義的配置工做。而我今天帶來的 @youngjuning/eslint-config-airbnb 即是用來把你從繁瑣的 ESLint 配置工做中解放出來的一款插件。

介紹

一款基於 airbnb 的強大的 eslint 配置插件，支持 vue、jsx、js、ts、tsx、html、jest，致力於把你從繁瑣的 ESLint 配置工做中解放出來。

安裝

首先，爲了不衝突，請移除項目中已存在的配置，你能夠保留 rules

$ yarn add -D @youngjuning/eslint-config-airbnb
複製代碼

配置

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

module.exports = {
 root: true,  extends: '@youngjuning/airbnb', } 複製代碼

react native

module.exports = {
 root: true,  extends: '@youngjuning/airbnb',  env: {  'react-native/react-native': true,  }, } 複製代碼

vue with typescript

module.exports = {
 root: true,  extends: '@youngjuning/airbnb',  parserOptions: {  parser: '@typescript-eslint/parser',  }, } 複製代碼

更多

.eslintignore

!.eslintrc.js
!.prettierrc.js 複製代碼

.prettierrc.js

module.exports = {
 ...require('@youngjuning/eslint-config-airbnb/.prettierrc.js'), } 複製代碼

.prettierignore

**/node_modules/*
複製代碼

.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 複製代碼

yorkie & lint-staged

$ yarn add -D yorkie lint-staged
複製代碼

{
 "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"  ]  }, } 複製代碼

本文首發於楊俊寧的博客，創做不易，您的點贊👍是我堅持的動力