diff --git a/beta/src/pages/learn/editor-setup.md b/beta/src/pages/learn/editor-setup.md index 8f90eef111..f302aab9ce 100644 --- a/beta/src/pages/learn/editor-setup.md +++ b/beta/src/pages/learn/editor-setup.md @@ -1,53 +1,55 @@ --- -title: Editor Setup +title: 编辑器设置 +translators: +- dahui4dev --- -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. +编辑器配置得当可以使代码读写更加清晰高效。而且它还可以帮你在编码时提示错误!如果这是你第一次配置编辑器,或者你想调整现有的编辑器,我们有一些建议可供参考。 -## Your editor +## 你的编辑器 {#your-editor} -[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! +[VS Code](https://code.visualstudio.com/) 是现如今最流行的编辑器之一。它拥有庞大的扩展市场,同时能集成像 GitHub 这样的流行服务。下面列出的大多数功能都可以作为扩展添加到 VS Code 中,使其具有极高的可配置性! -Other popular text editors used in the React community include: +其他 React 社区里比较流行的文本编辑器包括: -* [WebStorm](https://www.jetbrains.com/webstorm/)—an integrated development environment designed specifically for JavaScript. -* [Sublime Text](https://www.sublimetext.com/)—has support for JSX and TypeScript, syntax highlighting and autocomplete built in. -* [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. +* [WebStorm](https://www.jetbrains.com/webstorm/) — 专为 JavaScript 设计的集成开发环境。 +* [Sublime Text](https://www.sublimetext.com/) — 支持 JSX 和 TypeScript,内置语法高亮和代码自动补全功能。 +* [Vim](https://www.vim.org/) — 一个高度可配置的文本编辑器,可以非常高效地创建和更改任何类型的文本。它作为 “vi” 包含在大多数 UNIX 系统和 Apple OS X 中。 -## Recommended text editor features +## 推荐的文本编辑器功能 {#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 +### 代码检查(Linting) {#linting} -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. +代码检查(Code linters)在你编写代码时会发现代码中的问题,帮你尽早修复这些问题。[ESLint](https://eslint.org/) 是一种流行的、开源的 JavaScript 代码检查工具。 -* [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/)) -* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) +* [使用 React 的推荐配置安装 ESLint](https://www.npmjs.com/package/eslint-config-react-app) (确保你已经安装了 [Node](https://nodejs.org/en/download/current/) ) +* [安装 VSCode 中的官方 ESLint 扩展](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) -### Formatting +### 格式化 {#formatting} -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. +与其他贡献者共享代码时,你最不想做的事就是争论代码缩进应该使用 [tabs 还是空格](https://www.google.com/search?q=tabs+vs+spaces) !幸好,[Prettier](https://prettier.io/) 会以预设的配置规则重新格式化代码以保证代码整洁。运行 Prettier,你的所有 tabs 将转换为空格——缩进、引号等将全部根据你的配置改变。理想状态下,当你保存文件时,Prettier 会自动运行格式化操作。 -You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps: +你可以安装 [Prettier 扩展在 VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 通过以下步骤: -1. Launch VS Code -2. Use Quick Open (press `CTRL/CMD + P`) -3. Paste in `ext install esbenp.prettier-vscode` -4. Press enter +1. 启动 VS Code +2. 使用快速打开(使用快捷键 `CTRL/CMD + P`) +3. 粘贴 `ext install esbenp.prettier-vscode` +4. 按回车键 -#### Formatting on save +#### 保存并自动格式化 {#formatting-on-save} -Ideally, you should format your code on every save. VS Code has settings for this! +理想情况下,你应该在每次保存时自动格式化代码。VS Code 就有这个配置! -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! +1. 在 VS Code, 按快捷键 `CTRL/CMD + SHIFT + P`. +2. 输入 "settings" +3. 按回车键 +4. 在搜索栏, 输入 "format on save" +5. 确保勾选 "format on save" 选项! -> 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. +> Prettier 有时会与其他 linter 发生冲突。但通常有一个方法可以让它们很好地一起运行。例如,如果你要一起使用 Prettier 和 ESLint,你可以用 [eslint-prettier](https://github.com/prettier/eslint-plugin-prettier) 插件将 Prettier 作为 ESLint 规则运行。