VSCode는 틀림없이 없어서는 안 될 도구이지만, 언어나 작업공간에 따라 확장을 활성화/비활성화할 수 있는 중요한 설정이 없습니다.
거의 저예요. 하루 종일 서로 다른 언어의 프로젝트 사이를 뛰어다녔어요. 저는 확장과 설정이 많아서 자원을 소모하는 장면마다 쓸모가 없어요.모든 항목에서 수동으로 비활성화할 수 있지만, 새 항목을 만들려면 다시 만들어야 합니다.그것은 시간을 낭비하는 것이다.
VSCode 팀이 이 문제를 해결했지만 React 개발을 위한 개요 파일을 만들 수 있는 변통 방법을 사용할 수 있습니다.
이것은 완벽하지 않다. 왜냐하면 당신은 여러 장면에서 사용하는 확장을 공유할 수 있기 때문이다.하지만 빠른 설정을 지원하기 위해 디스크에 공간을 적게 두는 것을 더 좋아합니다.

구성 파일 만들기

우리는 --extensions-dir 및 --user-data-dir 파라미터를 사용하여 확장과 데이터에 대한 새로운 프로필 폴더를 만들 것입니다.
운영 체제
명령
비옷code --extensions-dir "$HOME/.vscode/profiles/react/extensions" --user-data-dir "$HOME/.vscode/profiles/react/data"linuxcode --extensions-dir "$HOME/.vscode/profiles/react/extensions" --user-data-dir "$HOME/.vscode/profiles/react/data"이기다code --extensions-dir "%HOMEPATH%/.vscode/profiles/react/extensions" --user-data-dir "%HOMEPATH%/.vscode/profiles/react/data"

⚠️ WSL2 does not support --extensions-dir or --user-data-dir flags

어떻게 사용합니까?

너 미쳤어?React?를 사용할 때마다 이 긴 명령을 작성하고 기억해야 합니다.
아니오, 물론 아니에요.

macOS/Linux에서

이 이미지는 이 경로$HOME/.vscode/profiles/react/download에 있습니다.

별칭

이런 상황에서 별명은 아마도 우리의 가장 친한 친구일 것이다..zshrc 또는 .bash_profile 을 열고 붙여넣습니다.

alias code-react="code --extensions-dir \"$HOME/.vscode/profiles/react/extensions\" --user-data-dir \"$HOME/.vscode/profiles/react/data\""

파일을 저장하고 터미널 창을 다시 시작합니다.이제 code . 명령을 사용하여 VSCode에서 폴더 항목을 열 수 있지만 React를 사용하려면 code-react . 를 다시 사용하십시오.

도크 발사기

같은 경로에서 code-react.command 라는 파일을 만들고 다음 코드를 포함합니다.

open -n -a "Visual Studio Code.app" --args --extensions-dir="$HOME/.vscode/profiles/react/extensions" --user-data-dir="$HOME/.vscode/profiles/react/data"

사용 권한 저장 및 사용chmod +x code-react.command.
클립보드의 icon-react.png 내용을 복사합니다.미리보기에서 그림을 열고 Edit > Select All 를 선택한 다음 Edit > Copy 을 선택하거나 Command-C 를 누르는 방법이 있습니다.code-react.command 파일을 선택한 다음 File > Get Info 을 선택합니다.정보 창 상단에서 아이콘의 그림을 눌러서 선택한 다음 Edit > Paste 을 선택하거나 Command-V 을 누르십시오.code-react.command 파일을 선택한 다음 File > Make Alias 을 선택하거나 Command-L 키를 눌러 VSCode React로 이름을 지정합니다.이 Alias 바로 가기를 Dock이나 데스크톱으로 드래그하면 됩니다.

Recommended configurations: Open a terminal window, go to 'Preference > Profiles. Set Auto close terminal on exit: inside 'Shell' tab, select "Close if the shell exited cleanly" on "When the shell exits" option.

Windows에서

이 아이콘은 이 경로%HOMEPATH%/.vscode/profiles/react/download에 있습니다.

바로 가기

같은 경로에서 바로 가기 파일을 만들고 다음 속성을 설정합니다.
이름: VSCode React대상 설정:

"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe" --extensions-dir "%HOMEPATH%/.vscode/profiles/react/extensions" --user-data-dir "%HOMEPATH%/.vscode/profiles/react/data"

시작:

"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code"

이전에 다운로드한 아이콘을 사용합니다.

Sadly on Windows create an alias it slightly more complicated than macOS/Linux, then you only can open it using the shortcut and can't open it directly from the project path. But if you are using WSL you can use the same alias approach from mac/linux.

색깔

VSCode 및 React 스타일의 VSCode 버전을 사용하는 시기를 확인하는 것이 좋습니다.

{
    "workbench.colorCustomizations": {
        "activityBar.background": "#00d8ff",
        "activityBar.foreground": "#000000",
        "activityBar.inactiveForeground": "#00000099",
        "activityBarBadge.background": "#6dffff",
        "activityBarBadge.foreground": "#000000",
        "statusBar.noFolderBackground": "#00a6cc",
        "statusBar.background": "#00d8ff",
        "statusBar.foreground": "#000000",
        "statusBarItem.hoverBackground": "#00a6cc"
    }
}

/.vscode/설정.json

그게 다야.이제 어떤 설정과 확장을 설치할지 결정하십시오.이것들은 내가 가장 좋아하는 건의이다.

확장

편집하다

DotENV

Template String Converter

npm Intellisense

Path Intellisense

{
    "javascript.suggest.paths": false,
    "typescript.suggest.paths": false
}

/.vscode/설정.json

IntelliSense for CSS class names in HTML

React Preview

Sapling

디버깅

VSCode의 debug React에 추가 확장을 설치할 필요가 없습니다.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

/.vscode/launch.jsonnpm run start 명령을 실행할 때마다 브라우저 열기를 비활성화하려면 프로젝트의 BROWSER=none 파일에 .env 을 추가하면 됩니다.

Turbo Console Log

{
    "turboConsoleLog.logMessagePrefix": "DEBUG -> "
}

설치.json

대들보를 건너다

HTMLHint

코드 세그먼트

Arrow Function Snippets

ES7 React/Redux/GraphQL/React-Native snippets

Simple React Snippets

스타일

Autoprefixer

CSS Modules

CSS Peek

CSS Variable Autocomplete

language-stylus

테스트

Jest Snippets

Test Explorer UI + Jest

{
    "testExplorer.errorDecoration": true,
    "testExplorer.errorDecorationHover": true,
    "testExplorer.useNativeTesting": true
}

/.vscode/설정.json

Code Coverage Highlighter

coverage 폴더를 .gitignore 파일에 추가하는 것을 기억하십시오.

동기화

여러 GitHub 사용자 계정을 사용할 수 있고 프로필을 만들 수 없기 때문에 내장된 VSCode 동기화 옵션을 좋아하지 않습니다.
그러나 걱정하지 마세요. 우리는 모두가 알고 있는 Setting Sync 확장을 사용할 수 있습니다.
사용자 이름에 create another GitHub account을(를) 추가하고 -react을(를) Gmail 계정에 추가하십시오.

이 기술이 있으면 새로운 전자 메일 계정을 만들지 않고 다른 GitHub 계정을 가질 수 있습니다.새 +react 계정만 사용하면 React 스타일 VSCode 버전을 여러 장치에서 동기화할 수 있습니다.

구글 브라우저 확장

Chrome의 디버깅 도구가 필요합니다. 확장을 추천합니다.

React Developer Tools

Redux Devtools

보너스 트랙

자동linting, 포맷, 기타 무료한 작업으로 이 별빛이 찬란한 항목 설정을 보는 것을 잊지 마세요.

강력한 React 프로젝트 설정

카밀로 마틴네스・ 2012년 6월 9일・ 5분 읽기

#react #vscode #productivity #testing

이게 다야!
즐거움 코드🖖