保存時にリンティングのヒントとフォーマットを使用して、優れたVSCodeセットアップを取得するための簡単な手順
この投稿では、取得するための簡単な手順について説明しますReact開発のための素晴らしいVSCodeセットアップ、とリンティングのヒントそして保存時のフォーマット。
ESLint
まず、ESLintをインストールします。 ESLintは、コードを小さくクリーンに保つのに役立つすばらしいツールです。
インストールESLintを使用してESLint拡張機能VS Code ExtensionsStoreで入手できます。
次に、ターミナルからそれらを実行します糸コマンド(Yarnをまだインストールしていない場合は、チュートリアルへのリンクをたどって短いガイドを見つけてください):
yarn add babel-eslint
yarn add eslint-config-airbnb
yarn add eslint-plugin-jsx-a11y
yarn add eslint-plugin-reactNow, 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-devNext 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:
- A React simple app example: fetch GitHub users information via API
- Build a simple counter with React
- VS Code setup for React development
- How to pass props to a child component via React Router
- Create an app with Electron and React
- Tutorial: create a Spreadsheet using React
- The roadmap to learn React
- Learn how to use Redux
- Getting started with JSX
- Styled Components
- Introduction to Redux Saga
- Introduction to React Router
- Introduction to React
- React Components
- The Virtual DOM
- React Events
- The React State
- React Props
- The React Fragment
- The React Context API
- React PropTypes
- React concepts: declarative
- React: How to show a different component on click
- How to loop inside React JSX
- Props vs State in React
- Should you use jQuery or React?
- How much JavaScript you need to know to use React?
- Introduction to Gatsby
- How to reference a DOM element in React
- Unidirectional Data Flow in React
- React Higher Order Components
- React Lifecycle Events
- React Concept: Immutability
- React Concept: Purity
- Introduction to React Hooks
- Introduction to create-react-app
- React Concept: Composition
- React: Presentational vs Container Components
- Code Splitting in React
- Server Side Rendering with React
- How to install React
- CSS in React
- Using SASS in React
- Handling Forms in React
- React StrictMode
- React Portals
- React Render Props
- Testing React components
- How to pass a parameter to event handlers in React
- How to handle errors in React
- How to return multiple elements in JSX
- Conditional rendering in React
- React, how to transfer props to child components
- How to get the value of an input element in React
- How to use the useState React hook
- How to use the useCallback React hook
- How to use the useEffect React hook
- How to use the useMemo React hook
- How to use the useRef React hook
- How to use the useContext React hook
- How to use the useReducer React hook
- How to connect your React app to a backend on the same origin
- The Reach Router Tutorial
- How to use the React Developer Tools
- How to learn React
- How to debug a React application
- How to render HTML in React
- How to fix the `dangerouslySetInnerHTML` did not match error in React
- How I fixed an issue with a React login form state and Browser autofill
- How to configure HTTPS in a React app on localhost
- How to fix the "cannot update a component while rendering a different component" error in React
- Can I use React hooks inside a conditional?
- Using useState with an object: how to update
- How to move around blocks of code with React and Tailwind
- React, focus an item in React when added to the DOM
- React, edit text on doubleclick