도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

VSCode 추천 익스텐션과 세팅 (VSCode Recommended Extensions and Settings)

Atom + Nuclide 조합으로 1년 정도 사용 해오다 최근 vscode로 변경 했다. 아톰을 사용하다 보면 메모리 점유율이 너무 높아져 아톰이 느려지는 현상이 계속 생겨서 재시작을 해야 하는 경우가 많이 생겼다. 아톰과 vscode 비교 자료를 보면 퍼포먼스나 사용성 면에서 vscode가 나은 것 같아서 이참에 변경하게 됐다. 지금 프로젝트에서 주로 리액트(React), 리액트 네이티브(React Native)와 GraphQL을 사용 하기 때문에 관련한 익스텐션과 사용 해보니 좋은 익스텐션과 세팅을 공유한다.

추천 세팅

기본 언어 모드 변경

.js 파일 생성시에 language mode를 javascript가 아닌 javascriptreact로 세팅 되게 했다.

"files.associations": {
"*.js": "javascriptreact"
}

Explorer에서 제외

Explorer에서 보일 필요 없는 파일들을 숨겨준다. yarn.lock, node_modules 등 필요하지 않은 것들을 추가했다.

"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.DS_Store": true,
"**/node_modules": true,
"**/.idea": true,
"**/.vscode": false,
"**/yarn.lock": true,
"**/tmp": true
},

검색 대상에서 제외

검색 시에 검색 될 필요 없는 디렉토리/파일 등을 검색 대상에서 제외 한다. 기본 세팅에 jest, 리액트 네이티브 등에서 검색 안되도 되는 파일들을 추가 했다.


"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/.git": true,
"**/.DS_Store": true,
"**/tmp": true,
"**/coverage": true,
"**/build": true,
"**/Pods": true,
"**/*.xcodeproj": true,
"**/*.xcworkspace": true
},

코드 자동 수정

파일 저장시에 eslint fix를 자동으로 실행하게 한다.

"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,

전체 세팅

지금 쓰고 있는 전체 vscode 세팅

{
"window.zoomLevel": 0,
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.fontLigatures": true,
"editor.fontFamily": "Fira Code, Operator Mono",
"editor.snippetSuggestions": "top",
"workbench.iconTheme": "vscode-icons",
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
// files
"files.associations": {
"*.js": "javascriptreact"
},
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.DS_Store": true,
"*/node_modules": true,
"**/.idea": true,
"**/.vscode": false,
"**/yarn.lock": true,
"**/tmp": true,
"node_modules": true
},
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/node_modules/**": true,
"**/tmp": true,
"**/build": true
},
"files.trimTrailingWhitespace": true,
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/.git": true,
"**/.DS_Store": true,
"**/tmp": true,
"**/coverage": true,
"**/build": true,
"**/Pods": true,
"**/*.xcodeproj": true,
"**/*.xcworkspace": true,
"**/.meteor": true
},
"html.suggest.html5": true,
"npm-intellisense.scanDevDependencies": false,
"extensions.autoUpdate": true,
// flow
"javascript.validate.enable": false,
"flow.useNPMPackagedFlow": true,
// prettier
"prettier.eslintIntegration": true,
"prettier.singleQuote": true,
"prettier.trailingComma": "es5",
"prettier.jsxBracketSameLine": true,
"prettier.parser": "flow",
"workbench.colorTheme": "Material Theme Palenight",
// eslint
"eslint.autoFixOnSave": true,
"typescript.check.tscVersion": false,
"todohighlight.isEnable": true
}

추천 패키지

React Native Tools

React Native Tools: 리액트 네이티브 코드 자동완성, 디버깅, Packager, iOS, Android, Exponent 실행, 재시작 등의 커맨드를 제공한다.(https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native)


vscode ESLint

ESLint: 추가 설명은 생략해도 될듯. (https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)


GraphQL for VSCode: vscode에서 GraphQL에 대해서 코드 하이라이트를 해준다. (https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode)


Flow Language Support

Flow Language Support: Flow를 사용한다면 필요한 익스텐션. Flow 에러를 vscode의 problems 탭과 코드에 표시해준다.


Jest

Jest: 테스트 코드를 Jest를 사용 한다면 추천하는 익스텐션. 에디터 내에서 Jest를 실행해서 success / fail을 화면에 표시해주고, 실패한 스냅샷을 버튼 클릭으로 업데이트 할 수 있다. 또한 스냅샷 문법 하이라이트(syntax highlight)를 제공한다.


Debugger for Chrome

Debugger for Chrome: 구글 크롬과 통합된 디버깅 환경을 제공하는 익스텐션.


IntelliSense for CSS class names

IntelliSense for CSS class names: CSS 클래스명 자동 완성 기능.


React-Native/React/Redux snippets for es6/es7

React-Native/React/Redux snippets for es6/es7: 리액트, 리액트 네이티브, 리덕스, styled-components의 code snippet


Reactjs code snippets

Reactjs code snippets: 리액트 code snippet


Prettier

Prettier: vscode Pretter 익스텐션 (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)


Prettier - ESLint

Prettier - ESLint: ESLint와 Prittier를 함께 쓰고 싶다면 필요한 패키지


Babel EX6/ES7

Babel ES6/ES7: vscode 바벨 익스텐션


vscode-styled-components

vscode-styled-components: styled-components를 코드 하이라이트를 해준다.


vscode-icons

vscode-icons: 파일 아이콘 (https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons)


Auto Rename Tag

Auto Rename Tag: HTML/XML, JSX의 태그를 수정 할 때, 페어(pair) 태그를 자동으로 수정 해준다.


Auto Close Tag

Auto Close Tag: 자동으로 HTML/XML, JSX 태그의 close 태그를 만들어준다.


Rainbow Brackets

Rainbow Brackets: bracket마다 다른 컬러를 입혀준다. 중첩으로 bracket이 선언 될 때 헷갈릴 수 있는 문제를 해결해준다.


Document This

Document This: 자동으로 JSDoc 주석을 만들어준다. (https://marketplace.visualstudio.com/items?itemName=joelday.docthis)


Git History (git log)

Git History: Git History를 에디터 내에서 그래프 형태로 볼 수 있다.


Instant Markdown

Instant Markdown: 마크다운 파일을 바로 브라우저에서 확인하면서 수정 할 수 있다.(https://marketplace.visualstudio.com/items?itemName=dbankier.vscode-instant-markdown)


npm Intellisense

npm Intellisense: npm module을 import 할 때 자동완성 기능을 제공한다.


Path Intellisense

Path Intellisense: 디렉토리 경로와 파일명 자동 완성 기능 제공


Project Manager

Project Manager: 여러 프로젝트를 진행 하고 있다면 추천하는 익스텐션. workspace를 프로젝트 별로 관리 할 수 있다.


Settings Sync

Settings Sync: vscode의 설정을 동기 시켜준다.


TODO Highlight

TODO Highlight: TODO, FIXME, NOTE 등 주석에 사용되는 단어를 하이라이트 해주고, 리스팅 해준다.


Advanced New File

Advanced New File: path를 통해 파일을 만들 수 있다. path가 존재하지 않는 다면 디렉토리를 만든다. 새로운 파일 생성 할 때 유용하다.


Bookmarks: 코드 라인에 북마크를 할 수 있고, 커멘드 또는 단축키를 통해 북마크 한 라인으로 바로 이동 할 수 있다.


리뷰

JaeWon Jang

VSCode 추천 익스텐션과 세팅 (VSCode Recommended Extensions and Settings)

작성한글 수정이 안되네요...json설정파일 엎어치거나 위에 언급하신 Settings Sync 사용하면 개발환경 설정은 쉽게 되는 것 같네요 ^^;

JaeWon Jang

VSCode 추천 익스텐션과 세팅 (VSCode Recommended Extensions and Settings)

문의

atom같은경우 package.txt처럼 설정파일 뽑아서 다른 pc에서 동일한 환경셋팅이(설정 및 플러그인설치) 쉬운데 vsc도 그게 가능한가요? ㅎㅎ