એડિટર સેટઅપ

તમારુ એડિટર

VS Code એ આજે ઉપયોગમાં લેવાતા સૌથી લોકપ્રિય એડિટરો પૈકીનું એક છે. તેની પાસે એક્સ્ટેંશનનું વિશાળ બજાર છે અને GitHub જેવી લોકપ્રિય સેવાઓ સાથે સારી રીતે સંકલિત છે. નીચે સૂચિબદ્ધ મોટાભાગની સુવિધાઓ VS Code માં એક્સ્ટેંશન તરીકે પણ ઉમેરી શકાય છે, જે તેને અત્યંત કોન્ફિગરેબલ બનાવે છે!

React સમુદાયમાં વપરાતા અન્ય લોકપ્રિય ટેક્સ્ટ એડિટરો માં નીચેના એડિટરો નો સમાવેશ થાય છે:

• WebStorm એક integrated development environment છે જે ખાસ કરીને જાવાસ્ક્રિપ્ટ માટે રચાયેલ છે.
• Sublime Text JSX અને TypeScript સપોર્ટ કરે છે,સિન્ટેક્સ હાઇલાઇટિંગ અને autocomplete નો બિલ્ટ ઇન સપોર્ટ ધરાવે છે.
• Vim એ અત્યંત કોન્ફિગરેબલ ટેક્સ્ટ એડિટર છે જે કોઈપણ પ્રકારના ટેક્સ્ટને ખૂબ જ કાર્યક્ષમ બનાવવા અને બદલવા માટે બનાવવામાં આવ્યું છે. તે મોટાભાગની UNIX સિસ્ટમો અને Apple OS X સાથે “vi” તરીકે સમાવિષ્ટ છે.

ટેક્સ્ટ એડિટર ની સુવિધાવો માટેની ભલામણ

કેટલાક એડિટરો બિલ્ટ-ઇન આ સુવિધાઓ સાથે આવે છે, પરંતુ અન્યને એક્સ્ટેંશન ઉમેરવાની જરૂર પડી શકે છે. ખાતરી કરવા માટે તમારા પસંદગીના એડિટર શું સમર્થન આપે છે તે જોવા માટે તપાસો!

લિંટિંગ

કોડ લિંટર્સ તમારા કોડમાં સમસ્યાઓ શોધી કાઢે છે જેમ તમે લખો છો, જે તમને વહેલી તકે ઠીક કરવામાં મદદ કરે છે. ESLint એ જાવાસ્ક્રિપ્ટ માટે લોકપ્રિય, ઓપન સોર્સ લિંટર છે.

• React માટે ભલામણ કરેલ ગોઠવણી સાથે ESLint ઇન્સ્ટોલ કરો (ખાતરી કરો કે તમે Node ઇન્સ્ટોલ કર્યું છે!)
• સત્તાવાર એક્સ્ટેંશન સાથે VSCode માં ESLint ને એકીકૃત કરો

ખાતરી કરો કે તમે તમારા પ્રોજેક્ટ માટે તમામ eslint-plugin-react-hooks નિયમોને લાગુ કર્યા છે. તેઓ આવશ્યક છે અને સૌથી ગંભીર ભૂલોને વહેલા પકડી લે છે. ભલામણ કરેલ eslint-config-react-app પ્રીસેટમાં પહેલેથી જ તેનો સમાવેશ થાય છે.

ફોર્મેટિંગ

અન્ય યોગદાનકર્તા સાથે તમારો કોડ શેર કરતી વખતે તમે જે છેલ્લું કામ કરવા માંગો છો તે છે tabs vs spaces વિશે ચર્ચામાં આવવું! સદનસીબે, Prettier તમારા કોડને પ્રીસેટ, ગોઠવણી કરી શકાય તેવા નિયમોને અનુરૂપ થવા માટે તેને ફરીથી ફોર્મેટ કરીને સાફ કરશે. Prettier ચલાવો, અને તમારી બધી ટેબ્સ સ્પેસમાં રૂપાંતરિત થઈ જશે અને તમારું ઇન્ડેન્ટેશન, અવતરણ વગેરે પણ ગોઠવણીને અનુરૂપ થવા માટે બદલાઈ જશે. આદર્શ સેટઅપમાં, જ્યારે તમે તમારી ફાઇલ સેવ કરશો ત્યારે Prettier ચાલશે, તમારા માટે આ ફેરફારો ઝડપથી કરશે.

તમે આ પગલાંને અનુસરીને VSCode માં Prettier એક્સટેન્શન ઇન્સ્ટોલ કરી શકો છો:

1. VS Code લોંચ કરો
2. ક્વિક ઓપનનો ઉપયોગ કરો (Ctrl/Cmd+P દબાવો)
3. ext install esbenp.prettier-vscode માં પેસ્ટ કરો
4. Enter દબાવો

સેવ પર ફોર્મેટિંગ

આદર્શ રીતે, તમારે દરેક સેવ પર તમારો કોડ ફોર્મેટ કરવો જોઈએ. VS Code આ માટે સેટિંગ્સ ધરાવે છે!

1. VS કોડમાં, CTRL/CMD + SHIFT + P દબાવો.
2. ”settings” લખો
3. એન્ટર દબાવો
4. સર્ચ બારમાં, “format on save” ટાઈપ કરો
5. ખાતરી કરો કે “format on save” વિકલ્પ ટિક કરેલ છે!

જો તમારા ESLint પ્રીસેટમાં ફોર્મેટિંગ નિયમો હોય, તો તેઓ Prettier સાથે વિરોધાભાસી થઈ શકે છે. અમે eslint-config-prettier નો ઉપયોગ કરીને તમારા ESLint પ્રીસેટમાંના તમામ ફોર્મેટિંગ નિયમોને નિષ્ક્રિય કરવાની ભલામણ કરીએ છીએ જેથી ESLintનો ફક્ત ઉપયોગ તાર્કિક ભૂલો પકડવા માટે થાય. જો તમે પુલ વિનંતીને મર્જ કરવામાં આવે તે પહેલાં ફાઇલોને ફોર્મેટ કરવામાં આવે તે લાગુ કરવા માંગતા હો, તો તમારા continuous integration prettier --check નો ઉપયોગ કરવો.