|
1 | 1 | --- |
2 | | -title: Editor Setup |
| 2 | +title: Cài đặt trình soạn thảo văn bản |
3 | 3 | --- |
4 | 4 |
|
5 | 5 | <Intro> |
6 | 6 |
|
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 | +Một trình soạn thảo văn bản được cấu hình đúng cách có thể làm cho mã nguồn dễ đọc hơn và tốc độ viết code nhanh hơn. Nó còn có thể giúp bạn phát hiện lỗi khi bạn đang viết code! Nếu đây là lần đầu tiên bạn cài đặt một trình soạn thảo văn bản hoặc bạn đang muốn tinh chỉnh trình soạn thảo văn bản hiện tại của mình, chúng tôi có vài đề xuất. |
8 | 8 |
|
9 | 9 | </Intro> |
10 | 10 |
|
11 | 11 | <YouWillLearn> |
12 | 12 |
|
13 | | -* What the most popular editors are |
14 | | -* How to format your code automatically |
| 13 | +* Các trình soạn thảo phổ biến nhất |
| 14 | +* Làm sao để định dạng code một cách tự động |
15 | 15 |
|
16 | 16 | </YouWillLearn> |
17 | 17 |
|
18 | | -## Your editor {/*your-editor*/} |
| 18 | +## Trình soạn thảo văn bản của bạn {/*trình-soạn-thảo-văn-bản-của-bạn*/} |
19 | 19 |
|
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/) là một trong những trình soạn thảo phổ biến nhất hiện nay. VS Code có một cửa hàng ứng dụng mở rộng khổng lồ và tích hợp tốt với các dịch vụ phổ biến như GitHub. Hầu hết các tính năng được liệt kê dưới đây có thể được thêm vào VS Code dưới dạng các tiện ích mở rộng, làm cho nó có khả năng tùy chỉnh cao! |
21 | 21 |
|
22 | | -Other popular text editors used in the React community include: |
| 22 | +Các trình soạn thảo phổ biến khác được sử dụng trong cộng đồng React bao gồm: |
23 | 23 |
|
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/) là một môi trường phát triển tích hợp được thiết kế đặc biệt cho JavaScript. |
| 25 | +* [Sublime Text](https://www.sublimetext.com/) có hỗ trợ cho JSX và TypeScript, [làm nổi bật cú pháp](https://stackoverflow.com/a/70960574/458193) và tự động hoàn thiện code được tích hợp sẵn. |
| 26 | +* [Vim](https://www.vim.org/) là một trình soạn thảo có khả năng tùy chỉnh cao, được xây dựng để tạo và thay đổi bất kỳ loại văn bản nào một cách hiệu quả. Nó được bao gồm dưới dạng "vi" với hầu hết các hệ thống UNIX và trên Apple OS X. |
27 | 27 |
|
28 | | -## Recommended text editor features {/*recommended-text-editor-features*/} |
| 28 | +## Những tính năng của trình soạn thảo văn bản được đề xuất {/*những-tính-năng-của-trình-soạn-thảo-văn-bản-được-đề-xuất*/} |
29 | 29 |
|
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 | +Một số trình soạn thảo đi kèm với các tính năng này được tích hợp sẵn, nhưng một số khác có thể yêu cầu thêm tiện ích mở rộng. Để chắc chắn thì hãy kiểm tra xem trình soạn thảo của bạn có hỗ trợ chúng không! |
31 | 31 |
|
32 | 32 | ### Linting {/*linting*/} |
33 | 33 |
|
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 | +Các trình kiểm tra lỗi code (linters) giúp phát hiện các vấn đề trong code của bạn khi bạn viết nó, giúp bạn sửa chúng sớm. [ESLint](https://eslint.org/) là một linter mã nguồn mở rất phổ biến. |
35 | 35 |
|
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 | +* [Cài đặt ESLint với cấu hình khuyến nghị cho React](https://www.npmjs.com/package/eslint-config-react-app) (hãy chắc chắn bạn đã [cài đặt Node!](https://nodejs.org/en/download/current/)) |
| 37 | +* [Tích hợp ESLint vào VSCode với tiện ích mở rộng chính thức](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) |
38 | 38 |
|
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 | +**Hãy đảm bảo rằng bạn đã kích hoạt tất cả các quy tắc của [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) cho dự án của mình.** Vì chúng là cực kỳ quan trọng và giúp phát hiện các lỗi nghiêm trọng nhất sớm nhất có thể. Bộ cài đặt mặc định [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) đã bao gồm chúng. |
40 | 40 |
|
41 | | -### Formatting {/*formatting*/} |
| 41 | +### Định dạng code {/*định-dạng-code*/} |
42 | 42 |
|
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 | +Điều cuối cùng mà bạn muốn làm khi chia sẻ code của mình cho người khác chính là tranh cãi với họ về việc sử dụng [tabs và spaces](https://www.google.com/search?q=tabs+vs+spaces)! May mắn thay, [Prettier](https://prettier.io/) sẽ giúp bạn làm sạch code của mình bằng cách định dạng lại theo các quy tắc được thiết lập sẵn và có thể cấu hình được. Chạy Prettier và tất cả các tab của bạn sẽ được chuyển đổi thành dấu cách - và các thụt đầu dòng, dấu ngoặc kép, v.v. cũng sẽ được thay đổi để phù hợp với cấu hình. Trong cài đặt lý tưởng, Prettier sẽ chạy khi bạn lưu tệp của mình, nhanh chóng thực hiện các chỉnh sửa này cho bạn. |
44 | 44 |
|
45 | | -You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps: |
| 45 | +Bạn có thể cài đặt [tiện ích Prettier trong VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) bằng những bước sau đây: |
46 | 46 |
|
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. Mở VS Code |
| 48 | +2. Sử dụng Quick Open (bấm Ctrl/Cmd+P) |
| 49 | +3. Dán dòng chữ `ext install esbenp.prettier-vscode` |
| 50 | +4. Bấm Enter |
51 | 51 |
|
52 | | -#### Formatting on save {/*formatting-on-save*/} |
| 52 | +#### Định dạng code khi lưu {/*định-dạng-code-khi-lưu*/} |
53 | 53 |
|
54 | | -Ideally, you should format your code on every save. VS Code has settings for this! |
| 54 | +Lý tưởng hơn, bạn muốn định dạng code của bạn mỗi khi lưu chúng. VS Code đã có các thiết lập sẵn cho điều này! |
55 | 55 |
|
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. Trong VS Code, bấm `CTRL/CMD + SHIFT + P`. |
| 57 | +2. Gõ "settings" |
| 58 | +3. Bấm Enter |
| 59 | +4. Trong thanh tìm kiếm, gõ "format on save" |
| 60 | +5. Hãy chắc chắn rằng lựa chọn "format on save" đã được chọn! |
61 | 61 |
|
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 | +> Nếu bộ cấu hình ESLint của bạn có các quy tắc định dạng, chúng có thể xung đột với Prettier. Chúng tôi khuyến khích bạn tắt tất cả các quy tắc định dạng trong bộ cấu hình ESLint của mình bằng cách sử dụng [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) để ESLint *chỉ có thể* được sử dụng để bắt các lỗi về logic. Nếu bạn muốn bắt buộc các tệp phải được định dạng trước khi thực hiện hợp nhất một pull request, hãy sử dụng [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) cho CI của bạn ( CI - Continuous Integration - Tích hợp liên tục ). |
0 commit comments