Skip to content

Commit 5e55241

Browse files
authored
Translate Editor setup page (#291)
1 parent 8a64fcf commit 5e55241

File tree

2 files changed

+54
-54
lines changed

2 files changed

+54
-54
lines changed

beta/src/pages/learn/editor-setup.md

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,53 @@
1-
---
2-
title: Editor Setup
3-
---
4-
5-
<Intro>
6-
7-
A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as your write them! If this is your first time setting up an editor or you're looking to tune up your current editor, we have a few recommendations.
8-
9-
</Intro>
10-
11-
## Your editor {/*your-editor*/}
12-
13-
[VS Code](https://code.visualstudio.com/) is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable!
14-
15-
Other popular text editors used in the React community include:
16-
17-
* [WebStorm](https://www.jetbrains.com/webstorm/)—an integrated development environment designed specifically for JavaScript.
18-
* [Sublime Text](https://www.sublimetext.com/)—has support for JSX and TypeScript, syntax highlighting and autocomplete built in.
19-
* [Vim](https://www.vim.org/)—a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.
20-
21-
## Recommended text editor features {/*recommended-text-editor-features*/}
22-
23-
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!
24-
25-
### Linting {/*linting*/}
26-
27-
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.
28-
29-
* [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/))
30-
* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
31-
32-
### Formatting {/*formatting*/}
33-
34-
The last thing you want to do when sharing your code with another contributor is get into an discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) 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.
35-
36-
You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps:
37-
38-
1. Launch VS Code
39-
2. Use Quick Open (press `CTRL/CMD + P`)
40-
3. Paste in `ext install esbenp.prettier-vscode`
41-
4. Press enter
42-
43-
#### Formatting on save {/*formatting-on-save*/}
44-
45-
Ideally, you should format your code on every save. VS Code has settings for this!
46-
47-
1. In VS Code, press `CTRL/CMD + SHIFT + P`.
48-
2. Type "settings"
49-
3. Hit enter
50-
4. In the search bar, type "format on save"
51-
5. Be sure the "format on save" option is ticked!
52-
53-
> Prettier can sometimes conflict with other linters. But there's usually a way to get them to run nicely together. For instance, if you're using Prettier with ESLint, you can use [eslint-prettier](https://github.com/prettier/eslint-plugin-prettier) plugin to run prettier as an ESLint rule.
1+
---
2+
title: Konfiguracja edytora
3+
---
4+
5+
<Intro>
6+
7+
Prawidłowo skonfigurowany edytor może sprawić, że kod będzie łatwiejszy w czytaniu i szybszy w pisaniu. Może także pomóc wyłapać błędy w trakcie pisania! Jeśli to twój pierwszy raz z konfiguracją edytora lub jeśli szukasz wskazówek w usprawnieniu pracy z twoim obecnym, ten rozdział jest dla ciebie.
8+
9+
</Intro>
10+
11+
## Twój edytor {/_your-editor_/}
12+
13+
[VS Code](https://code.visualstudio.com/) jest obecnie jednym z najbardziej popularnych edytorów. Posiada ogromną bazę rozszerzeń i doskonale integruje się z popularnymi usługami, jak np. GitHub. Większość z funkcjonalności wymienionych poniżej można także dodać do VS Code w formie rozszerzeń, co sprawia, że jest bardzo dobrze konfigurowalny!
14+
15+
Społeczność Reacta używa także:
16+
17+
- [WebStorm](https://www.jetbrains.com/webstorm/) — zintegrowane środowisko deweloperskie zaprojektowane specjalnie do pracy z JavaScriptem.
18+
- [Sublime Text](https://www.sublimetext.com/) — posiada wbudowane wsparcie dla JSX oraz TypeScriptu, podświetlanie składni i autouzupełnianie.
19+
- [Vim](https://www.vim.org/) — elastyczny edytor tekstu stworzony do efektywnego pisania i modyfikowania dowolnego tekstu. W większości systemów UNIX-owych oraz w Apple OS X występuje pod nazwą "vi".
20+
21+
## Zalecane funkcje edytora tekstu {/_recommended-text-editor-features_/}
22+
23+
Niektóre edytory mają te funkcje wbudowane, inne wymagają instalowania rozszerzeń. Dla pewności sprawdź, jakie wsparcie dla nich ma twój edytor!
24+
25+
### Linting {/_linting_/}
26+
27+
Lintery kodu znajdują problemy w kodzie podczas jego pisania i pomagają je zawczasu naprawić. Popularnym, open-sourcowym linterem dla JavaScriptu jest [ESLint](https://eslint.org/).
28+
29+
- [Zainstaluj ESLinta z konfiguracją zalecaną dla Reacta](https://www.npmjs.com/package/eslint-config-react-app) (upewnij się, że masz [zainstalowany Node!](https://nodejs.org/en/download/current/))
30+
- [Zintegruj ESLint z VS Code za pomocą oficjalnego rozszerzenia](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
31+
32+
### Formatowanie {/_formatting_/}
33+
34+
Ostatnia rzecz, jaka powinna się wydarzyć po udostępnieniu twojego kodu współtwórcom projektu, jest dyskusja pt. [tabulatory vs spacje](https://www.google.com/search?q=tabulatory+vs+spacje)! Na szczęście jest [Prettier](https://prettier.io/), który posprząta w twoim kodzie, formatując go według ustalonych reguł. Uruchom Prettiera, a wszystkie tabulatory w kodzie zamienią się na spacje; wszelkie wcięcia, cudzysłowy i apostrofy itp. również zostaną podmienione na podstawie ustawień. Idealnie by było, gdyby Prettier był uruchamiany przy każdym zapisaniu pliku, automatycznie aplikując te reguły za ciebie.
35+
36+
Aby zainstalować [rozszerzenie Prettier dla VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), musisz:
37+
38+
1. Uruchomić VS Code
39+
2. Użyć komendy szybkiego otwarcia (naciśnij `CTRL/CMD + P`)
40+
3. Wkleić w pole `ext install esbenp.prettier-vscode`
41+
4. Nacisnąć Enter
42+
43+
#### Formatowanie podczas zapisu {/_formatting-on-save_/}
44+
45+
Idealnie by było, gdyby kod sam się formatował przy każdym zapisie pliku. VS Code ma do tego specjalny zestaw ustawień!
46+
47+
1. W VS Code naciśnij `CTRL/CMD + SHIFT + P`.
48+
2. Wpisz "settings"
49+
3. Naciśnij Enter
50+
4. W polu wyszukiwarki wpisz "format on save"
51+
5. Upewnij się, że opcja "format on save" jest zaznaczona!
52+
53+
> Prettier może czasem wejść w konflikt z innymi linterami, jednak zwykle da się je ze sobą pogodzić. Na przykład, jeśli używasz Prettiera z ESLintem, możesz zainstalować wtyczkę [eslint-prettier](https://github.com/prettier/eslint-plugin-prettier), aby uruchamiać Prettiera jako regułę ESLinta.

beta/src/sidebarLearn.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"path": "/learn/add-react-to-a-website"
2121
},
2222
{
23-
"title": "Editor Setup",
23+
"title": "Konfiguracja edytora",
2424
"path": "/learn/editor-setup"
2525
},
2626
{

0 commit comments

Comments
 (0)