Skip to content

Commit 35dece1

Browse files
authored
Merge pull request #24 from reactjs/editor-setup
Translate "Editor Setup"
2 parents 7037b37 + d01145d commit 35dece1

File tree

2 files changed

+33
-33
lines changed

2 files changed

+33
-33
lines changed

src/content/learn/editor-setup.md

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,62 @@
11
---
2-
title: Editor Setup
2+
title: Редакторды конфигурациялау
33
---
44

55
<Intro>
66

7-
A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as you 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.
7+
Дұрыс конфигурацияланған редактор кодты оқуды анық және жазуды жылдамырақ етеді. Бұл кодтта қателескен кезде оларды табуға көмектеседі! Редакторды бірінші рет орнатып жатсаңыз немесе редакторыңызды реттеңіз келсе, бізде бірнеше ұсыныстар бар.
88

99
</Intro>
1010

1111
<YouWillLearn>
1212

13-
* What the most popular editors are
14-
* How to format your code automatically
13+
* Ең танымал редакторлар қандай
14+
* Кодты автоматты түрде форматтау жолы
1515

1616
</YouWillLearn>
1717

18-
## Your editor {/*your-editor*/}
18+
## Сіздің редакторыңыз {/*your-editor*/}
1919

20-
[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!
20+
[VS Code](https://code.visualstudio.com/) бүгінгі таңда қолданылатын ең танымал редакторлардың бірі. Плагиндер жүйесінде кең таңдау бар және GitHub сияқты танымал қызметтермен жақсы біріктірілген. Төменде тізімделген мүмкіндіктердің көпшілігін VS Code-на плагиндер ретінде қосуға болады, бұл оны жоғары конфигурациялауға мүмкіндік береді!
2121

22-
Other popular text editors used in the React community include:
22+
React қауымдастығында қолданылатын басқа танымал мәтіндік редакторлар:
2323

24-
* [WebStorm](https://www.jetbrains.com/webstorm/) is an integrated development environment designed specifically for JavaScript.
25-
* [Sublime Text](https://www.sublimetext.com/) has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in.
26-
* [Vim](https://www.vim.org/) is 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.
24+
* [WebStorm](https://www.jetbrains.com/webstorm/) JavaScript үшін арнайы әзірленген орта.
25+
* [Sublime Text](https://www.sublimetext.com/) JSX және TypeScript қолдауы бар, [синтаксистік ерекшелеу](https://stackoverflow.com/a/70960574/458193) және қораптан автотолтыру бар.
26+
* [Vim](https://www.vim.org/) кез келген мәтін түрін жасау мен өзгертуді өте тиімді ету үшін жасалған жоғары конфигурацияланатын мәтіндік редактор. Ол UNIX жүйелерінің көпшілігінде және Mac OS жүйесінде «vi» командасымен шақырылады.
2727

28-
## Recommended text editor features {/*recommended-text-editor-features*/}
28+
## Ұсынылатын мәтіндік редактор мүмкіндіктері {/*recommended-text-editor-features*/}
2929

30-
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!
30+
Кейбір редакторлар осы мүмкіндіктермен бірге келеді, бірақ басқалары кеңейтімді қосуды қажет етуі мүмкін. Сіз таңдаған редактордың қандай мүмкіндіктері бар екенін тексеріңіз!
3131

32-
### Linting {/*linting*/}
32+
### Линтинг {/*linting*/}
3333

34-
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.
34+
Код линтерлері сіз жазған кезде кодыңыздағы ақауларды тауып, оларды ертерек түзетуге көмектеседі. [ESLint](https://eslint.org/) — JavaScript үшін танымал опенсорс жоба.
3535

36-
* [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/))
37-
* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
36+
* [React-қа ұсынылған ESLint конфигурациясын орнатыңыз](https://www.npmjs.com/package/eslint-config-react-app) ([Node орнатылғанына](https://nodejs.org/en/download/current/) көз жеткізіңіз!)
37+
* [ESLint бағдарламасын VSCode редакторына орнатыныз](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
3838

39-
**Make sure that you've enabled all the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) rules for your project.** They are essential and catch the most severe bugs early. The recommended [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) preset already includes them.
39+
**Жобаңызға [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) ережелерін қосқаныңызға көз жеткізіңіз.** Өте маңызды және қиын қателерді ерте ұстайды. Біз ұсынылған [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) пресет осылардын барлығын қамтиды.
4040

41-
### Formatting {/*formatting*/}
41+
### Форматтау {/*formatting*/}
4242

43-
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.
43+
Кодыңызды басқа адамдармен бөліскен кезде ең соңғы уайымдайтын нәрсе ол [табтар немесе бос орындар](https://www.google.com/search?q=tabs+vs+spaces)! Қуанышқа орай, [Prettier](https://prettier.io/) кодты алдын ала орнатылған ережелерге сәйкес форматтайды. Prettier-ді іске қосыңыз, сонда барлық қойған табтар, бос орындар, тырнақша түрі және т.б. конфигурацияға сәйкес келетіндей етіп өзгертіледі. Prettier файлды сақтаған кезде форматтауды іске қосылады, бұл сіздің жұмысынызды жеңілдетеді.
4444

45-
You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps:
45+
Мына қадамдарды орындау арқылы [VSCode ішінде Prettier кеңейтімін](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) орнатуға болады:
4646

47-
1. Launch VS Code
48-
2. Use Quick Open (press Ctrl/Cmd+P)
49-
3. Paste in `ext install esbenp.prettier-vscode`
50-
4. Press Enter
47+
1. VS code іске қосыңыз
48+
2. Жылдам ашуды пайдаланыңыз (Ctrl/Cmd+P)
49+
3. `ext install esbenp.prettier-vscode` командасын жазыныз
50+
4. Enter пернесін басыңыз
5151

52-
#### Formatting on save {/*formatting-on-save*/}
52+
#### Сақтау кезінде форматтау {/*formatting-on-save*/}
5353

54-
Ideally, you should format your code on every save. VS Code has settings for this!
54+
Ең дұрысы, кодты әр сақтау кезінде форматтау керек. VS Code-да бұл үшін параметрлер бар!
5555

56-
1. In VS Code, press `CTRL/CMD + SHIFT + P`.
57-
2. Type "settings"
58-
3. Hit Enter
59-
4. In the search bar, type "format on save"
60-
5. Be sure the "format on save" option is ticked!
56+
1. VS Code iшінде `CTRL/CMD + SHIFT + P` пернелер тіркесімін басыныз.
57+
2. "settings" теріңіз
58+
3. Enter пернесін басыңыз
59+
4. Іздеу жолағына "format on save" деп теріңіз.
60+
5. "format on save" опциясына белгі қойылғанына көз жеткізіңіз!
6161

62-
> 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.
62+
> Егер ESLint форматтау ережелері болса, олар Prettier бағдарламасымен қайшы келуі мүмкін.[`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) арқылы ESLint алдын ала орнатылған барлық форматтау ережелерін өшіруді ұсынамыз. ESLint *тек* логикалық қателерді анықтау үшін пайдаланылады. Pull request код біріктірудің алдында файлдардың форматтауына көз жеткізгіңіз келсе, үздіксіз біріктіру (continuous integration) жүйеңізде [`prettier --check`](https://prettier.io/docs/en/cli.html#--check командасын пайдаланыңыз.

src/sidebarLearn.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"path": "/learn/add-react-to-an-existing-project"
3434
},
3535
{
36-
"title": "Editor Setup",
36+
"title": "Редакторды конфигурациялау",
3737
"path": "/learn/editor-setup"
3838
},
3939
{

0 commit comments

Comments
 (0)