ఎడిటర్ సెటప్

మీ ఎడిటర్

నేడు వాడుకలో ఉన్న అత్యంత ప్రజాదరణ పొందిన ఎడిటర్లలో VS Code ఒకటి. ఇది ఎక్సటెన్షన్స్ యొక్క పెద్ద మార్కెట్‌ప్లేస్‌ను కలిగి ఉంది మరియు GitHub వంటి పాపులర్ సర్వీసులతో బాగా ఇంటిగ్రేట్ అవుతుంది. దిగువ జాబితా చేయబడిన చాలా ఫీచర్లను VS Code కి ఎక్సటెన్షన్స్ లాగా కూడా జోడించవచ్చు, తద్వారా దీన్ని చాలా వరకు కాన్ఫిగర్ చేయవచ్చు!

React కమ్యూనిటీలో ఉపయోగించే ఇతర పాపులర్ టెక్స్ట్ ఎడిటర్‌లు:

• WebStorm అనేది JavaScript కోసం ప్రత్యేకంగా రూపొందించబడిన ఇంటిగ్రేటెడ్ డెవలప్మెంట్ ఎన్విరాన్మెంట్.
• Sublime Text ‌లో JSX మరియు TypeScript కోసం సింటాక్స్ హైలైటింగ్ మరియు ఆటోకంప్లీట్ ఫీచర్లకు బిల్ట్ ఇన్ సపోర్ట్ ఉంది.
• Vim అనేది అత్యంత కాన్ఫిగర్ చేయగల టెక్స్ట్ ఎడిటర్, ఇది ఎలాంటి టెక్స్ట్‌ని అయినా సృష్టించడం మరియు మార్చడం చాలా ఎఫిసియెంట్గా చేయడానికి నిర్మించబడింది. ఇది చాలా UNIX సిస్టమ్‌లతో మరియు Apple OS X తో “vi” గా ఇంక్లూడ్ చేయబడింది.

Recommended text editor features

Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure!

Linting

Code linters find problems in your code as you write, helping you fix them early. ESLint is a popular, open source linter for JavaScript.

• Install ESLint with the recommended configuration for React (be sure you have Node installed!)
• Integrate ESLint in VSCode with the official extension

Make sure that you’ve enabled all the eslint-plugin-react-hooks rules for your project. They are essential and catch the most severe bugs early. The recommended eslint-config-react-app preset already includes them.

Formatting

The last thing you want to do when sharing your code with another contributor is get into an discussion about tabs vs spaces! Fortunately, Prettier will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you.

You can install the Prettier extension in VSCode by following these steps:

1. Launch VS Code
2. Use Quick Open (press Ctrl/Cmd+P)
3. Paste in ext install esbenp.prettier-vscode
4. Press Enter

Formatting on save

Ideally, you should format your code on every save. VS Code has settings for this!

1. In VS Code, press CTRL/CMD + SHIFT + P.
2. Type “settings”
3. Hit Enter
4. In the search bar, type “format on save”
5. Be sure the “format on save” option is ticked!

If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend disabling all formatting rules in your ESLint preset using eslint-config-prettier so that ESLint is only used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use prettier --check for your continuous integration.