Thiết lập mã VS để phát triển React

Các bước đơn giản để có được một thiết lập VS Code đẹp với các gợi ý và định dạng khi lưu

Bài đăng này giải thích các bước đơn giản để có đượcmột thiết lập VS Code đẹp để phát triển React, vớigợi ývàđịnh dạng khi lưu.

ESLint

Đầu tiên, chúng ta sẽ cài đặt ESLint. ESLint là một công cụ tuyệt vời giúp bạn giữ cho mã của mình nhỏ và sạch.

Tải vềESLintsử dụngTiện ích mở rộng ESLintcó sẵn trên Cửa hàng tiện ích mở rộng mã VS.

Sau đó từ Terminal chạy nhữngSợilệnh (nếu bạn chưa cài đặt Yarn, hãy theo liên kết đến hướng dẫn của tôi để tìm hướng dẫn ngắn):

yarn add babel-eslint
yarn add eslint-config-airbnb
yarn add eslint-plugin-jsx-a11y
yarn add eslint-plugin-react
Now, create a .eslintrc.json file in the root of your project, and add the following lines to have a basis ESLint configuration that works for React development, with JSX support:


{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["react", "jsx-a11y", "import"]
}


Prettier


The next step I suggest is to install Prettier. Prettier is a JavaScript opinionated formatter. It’s a great tool because it helps you standardize your codebase, and it’s useful even if you code alone. In a team, it’s super useful as it avoids differences in code styling. Use what Prettier suggests.


You can install the Prettier VS Code extension with npm:


npm install -g prettier-eslint --save-dev
Next we’re going to add a few rules to the VS Code configuration, to apply Prettier on every save, and integrate it with ESLint. Press cmd+, (on Mac) and the VS Code configuration should show up. Enter this at the end:


"editor.formatOnSave": true,
"javascript.format.enable": false,
"prettier.eslintIntegration": true

  

  
Download my free React Handbook

  




More react tutorials:

Công nghệ Wiki trực tuyến!