Kā iestatīt ESLint un Prettier savām React lietotnēm

Blogs

Kā iestatīt ESLint un Prettier savām React lietotnēm

Vai esat kādreiz vēlējies konfigurēt Eslint pareizi darboties ar Prettier un lietotni Create React? Ja tā, tad šajā videoklipā jūs uzzināsit labākos iestatījumus, kā to izdarīt.



Soļi:

1. Instalējiet Eslint visā pasaulē

npm i -g eslint

2. Atveriet savu izveides-reaģēšanas lietotnes reaģēšanas projektu vai izveidojiet to, ierakstot

npx create-react-app name-of-project

(nepieciešams npm 5.2+)

3. Sāciet Eslint savā projektā:

eslint --init

(atbildi uz jautājumiem)



4. Apstipriniet eslint-plugin -rea instalēšanu

5. Atstājiet to savā ESlint konfigurācijā:

'env': { 'browser': true, 'es6': true }, 'extends': ['eslint:recommended'], 'plugins': ['react'], 'parserOptions': { 'ecmaVersion': 2018 }, 'rules': {}

6. Instalējiet eslint-config-reage-app vienaudžu atkarības:

npm install-peerdeps --dev eslint-config-react-app

7. Instalējiet skaistākas atkarības:

npm i -D eslint-config-prettier eslint-plugin-prettier prettier

8. Konfigurējiet Prettier, izmantojot ESlint piemēru:

{ 'env': { 'browser': true, 'es6': true }, 'extends': ['react-app', 'prettier'], 'plugins': ['react', 'prettier'], 'parserOptions': { 'ecmaVersion': 2018 }, 'rules': { 'prettier/prettier': [ 'error', { 'printWidth': 80, 'trailingComma': 'es5', 'semi': false, 'jsxSingleQuote': true, 'singleQuote': true, 'useTabs': true } ] } }

9. Mainiet VScode iestatījumus

'eslint.autoFixOnSave': true

10. Pārbaudiet, vai nav pretrunīgu noteikumu ar šādu skriptu package.json:

{ 'scripts': 'eslint-check': 'eslint --print-config path/to/main.js }

Laimīgu kodēšanu!

#reakcija #ESLint #Skaistāk



www.youtube.com

Kā iestatīt ESLint un Prettier savām React lietotnēm