-
[React] 유용한 리액트 관련 익스텐션 및 플러그인 모음Front End/React 2021. 10. 12. 13:18
1. React Developer Tools (Chrom Extension)
- 크롬 개발자 도구 수준에서 react-component 제어 가능
React Developer Tools
Adds React debugging tools to the Chrome Developer Tools. Created from revision 20ca9b565 on 10/8/2021.
chrome.google.com
2. ESLint
- create-react-app 에 설치된 내장기능
- 사용자가 정의한 규칙대로 js파일이 작성되었는지 확인해줌
- VScode 또는 node.js 로 따로 설치가능
ESLint - Pluggable JavaScript linter
Customize Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project.
eslint.org
3. Prettier
- VScode 또는 node.js 로 따로 설치가능
- Prettier가 js파일이 자기 주관에 맞게 이쁘게 바꿔본 대안을 제시하여 보여줌
- VScode에서 Default Formatter로 사용하고 옵션을 이리저리 만지면 코딩이 편해짐
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
prettier.io
4. Husky
- Git의 action 에 대한 핸들링을 도와주는 툴
ex) Commit 전에 (~~~~) 하고 싶어!
Husky - Git hooks
typicode.github.io
5. Lint-staged
- js 파일에 staged 에 올라왔을때 어떤 동작을 할지 설정
ex) if JS file in staged -> excute eslint and then prettier and then git add .
GitHub - okonet/lint-staged: 🚫💩 — Run linters on git staged files
🚫💩 — Run linters on git staged files. Contribute to okonet/lint-staged development by creating an account on GitHub.
github.com
6. Auto-Import
- VScode 익스텐션, 경로에 있는 컴포넌트들을 import 할 때 자동완성 시켜 준다.
Auto Import - Visual Studio Marketplace
Extension for Visual Studio Code - Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX
marketplace.visualstudio.com
728x90'Front End > React' 카테고리의 다른 글
[React] 라우팅 (Route, Link, NavLink, Switch) + QueryParameter (0) 2021.10.12 [React] 리액트의 라우팅과 SPA(Single Page Application) (0) 2021.10.12 [React] React Hooks 의 사용 이유 (0) 2021.09.24 [React] React 동작원리를 이해하자, Babel, JSX 없이 사용하는 React (0) 2021.09.24 [React] React & React-native & React Hook (0) 2021.08.31