ਆਪਣੇ ਪ੍ਰਤੀਕਰਮ ਐਪਸ ਲਈ ਈਐਸਲਿੰਟ ਅਤੇ ਪ੍ਰੀਟੀਅਰ ਨੂੰ ਕਿਵੇਂ ਸੈਟ ਅਪ ਕਰਨਾ ਹੈ

ਬਲੌਗ

ਕੀ ਤੁਸੀਂ ਕਦੇ ਪ੍ਰੀਲਟੀਅਰ ਅਤੇ ਆਪਣੀ ਕ੍ਰਿਏਟ ਰੀਐਕਟ ਐਪ ਦੇ ਨਾਲ ਸਹੀ workੰਗ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਐਸਲਿੰਟ ਨੂੰ ਕੌਂਫਿਗਰ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ? ਜੇ ਅਜਿਹਾ ਹੈ ਤਾਂ ਇਸ ਵੀਡੀਓ ਵਿੱਚ ਤੁਸੀਂ ਅਜਿਹਾ ਕਰਨ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਸੈਟਿੰਗਾਂ ਸਿੱਖੋਗੇ.



ਕਦਮ:

1. ਵਿਸ਼ਵ ਪੱਧਰ 'ਤੇ ਐਸਲਿੰਟ ਸਥਾਪਤ ਕਰੋ

npm i -g eslint

2. ਆਪਣਾ ਬਣਾਓ-ਪ੍ਰਤੀਕਰਮ-ਐਪ ਪ੍ਰਤੀਕਿਰਿਆ ਪ੍ਰੋਜੈਕਟ ਖੋਲ੍ਹੋ ਜਾਂ ਟਾਈਪ ਕਰਕੇ ਇੱਕ ਬਣਾਉ

npx create-react-app name-of-project

(npm 5.2+ ਦੀ ਲੋੜ ਹੈ)






3. ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ Eslint ਅਰੰਭ ਕਰੋ:

eslint --init

(ਸਵਾਲਾਂ ਦਾ ਜਵਾਬ ਦਿਓ)



4. eslint-plugin-react ਦੀ ਸਥਾਪਨਾ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ

5. ਇਸਨੂੰ ਆਪਣੀ ESlint ਸੰਰਚਨਾ ਵਿੱਚ ਛੱਡੋ:

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

6. eslint-config-react-app ਪੀਅਰ ਨਿਰਭਰਤਾ ਸਥਾਪਤ ਕਰੋ:

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

7. ਸੁੰਦਰ ਨਿਰਭਰਤਾ ਸਥਾਪਤ ਕਰੋ:

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

8. ESlint ਉਦਾਹਰਣ ਦੁਆਰਾ ਪ੍ਰੀਟੀਅਰ ਦੀ ਸੰਰਚਨਾ ਕਰੋ:

{ '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. ਆਪਣੀਆਂ VScode ਸੈਟਿੰਗਾਂ ਬਦਲੋ

'eslint.autoFixOnSave': true

10. package.json ਵਿੱਚ ਹੇਠ ਲਿਖੀ ਸਕ੍ਰਿਪਟ ਦੇ ਨਾਲ ਵਿਵਾਦਪੂਰਨ ਨਿਯਮਾਂ ਦੀ ਜਾਂਚ ਕਰੋ:

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

ਹੈਪੀ ਕੋਡਿੰਗ!



#ਰੀਐਕਟ #ਈਐਸਲਿੰਟ #ਸੁੰਦਰ






www.youtube.com

ਆਪਣੇ ਪ੍ਰਤੀਕਰਮ ਐਪਸ ਲਈ ਈਐਸਲਿੰਟ ਅਤੇ ਪ੍ਰੀਟੀਅਰ ਨੂੰ ਕਿਵੇਂ ਸੈਟ ਅਪ ਕਰਨਾ ਹੈ