Skip to content

Commit 7c68a47

Browse files
committed
editor setup
1 parent aec77d4 commit 7c68a47

File tree

2 files changed

+19
-6
lines changed

2 files changed

+19
-6
lines changed

docs/src/learn/editor-setup.md

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,19 @@ Other popular text editors used in the React community include:
2626

2727
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!
2828

29-
### Linting
29+
### Python Linting
3030

31-
Code linters find problems in your code as you write, helping you fix them early. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript.
31+
Linting is the process of running a program that will analyse code for potential errors. [Flake8](https://flake8.pycqa.org/en/latest/) is a popular, open source linter for Python.
32+
33+
- [Install Flake8](https://flake8.pycqa.org/en/latest/#installation) (be sure you have [Python installed!](https://www.python.org/downloads/))
34+
- [Integrate Flake8 in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=ms-python.flake8)
35+
- [Install Reactpy-Flake8](https://pypi.org/project/reactpy-flake8/) to lint your ReactPy code
36+
37+
### JavaScript Linting
38+
39+
You typically won't use much JavaScript alongside ReactPy, but there are still some cases where you might. For example, you might want to use JavaScript to fetch data from an API or to add some interactivity to your app.
40+
41+
In these cases, it's helpful to have a linter that can catch common mistakes in your code as you write it. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript.
3242

3343
- [Install ESLint with the recommended configuration for React](https://www.npmjs.com/package/eslint-config-react-app) (be sure you have [Node installed!](https://nodejs.org/en/download/current/))
3444
- [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
@@ -42,18 +52,20 @@ The last thing you want to do when sharing your code with another contributor is
4252
You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps:
4353

4454
1. Launch VS Code
45-
2. Use Quick Open (press Ctrl/Cmd+P)
55+
2. Use Quick Open, press ++ctrl+p++
4656
3. Paste in `ext install esbenp.prettier-vscode`
4757
4. Press Enter
4858

4959
#### Formatting on save
5060

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

53-
1. In VS Code, press `CTRL/CMD + SHIFT + P`.
63+
1. In VS Code, press ++ctrl+shift+p++
5464
2. Type "settings"
5565
3. Hit Enter
5666
4. In the search bar, type "format on save"
5767
5. Be sure the "format on save" option is ticked!
5868

59-
> 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`](https://github.com/prettier/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`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration.
69+
!!! note
70+
71+
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`](https://github.com/prettier/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`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration.

mkdocs.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ nav:
1010
- learn/installation.md
1111
- Start a New React Project : learn/start-a-new-react-project.md
1212
- Add React to an Existing Project 🚫 : learn/add-react-to-an-existing-project.md
13-
- Editor Setup 🚧 : learn/editor-setup.md
13+
- Editor Setup : learn/editor-setup.md
1414
- React Developer Tools 🚫 : learn/react-developer-tools.md
1515
- More Tutorials:
1616
- "Tutorial: React Bootstrap 🚫" : learn/tutorial-react-bootstrap.md
@@ -141,6 +141,7 @@ markdown_extensions:
141141
- admonition
142142
- attr_list
143143
- md_in_html
144+
- pymdownx.keys
144145

145146
plugins:
146147
- search

0 commit comments

Comments
 (0)