vscode에서 JavaScript를 구성하는 방법-프런트엔드 Q&A-php.cn

vscode에서 JavaScript를 구성하는 방법

WBOY

풀어 주다： 2023-05-29 12:17:38

원래의

2934명이 탐색했습니다.

JavaScript가 점점 대중화되면서 더 많은 개발자가 Visual Studio Code(줄여서 VSCode)를 사용하여 자신만의 JavaScript 코드를 작성하기 시작했습니다. VSCode는 JavaScript를 포함한 다양한 프로그래밍 언어와 프레임워크를 지원하는 Microsoft에서 개발한 경량 코드 편집기입니다. VSCode를 사용하여 JavaScript를 작성하는 경우 이 기사에서는 개발 효율성을 향상시키기 위해 VSCode를 구성하는 방법을 설명합니다.

VSCode 설치

먼저 공식 웹사이트(https://code.visualstudio.com/)에서 VSCode를 다운로드하여 설치해야 합니다. 설치가 완료되면 VSCode를 실행하고 JavaScript 프로젝트 폴더를 엽니다.

편집기 설정 조정

VSCode의 상단 메뉴에서 파일 > 설정 > 그러면 편집기 설정을 수정할 수 있는 JSON 파일이 열립니다.

다음은 필요에 따라 조정할 수 있는 몇 가지 일반적인 설정입니다.

"editor.tabSize": 탭 들여쓰기를 위한 공백 수를 설정합니다.

"editor.autoIndent": Enter 키를 누를 때 편집기가 자동으로 들여쓰기를 할지 여부입니다.

"editor.formatOnSave": 파일을 저장할 때 자동으로 코드 형식을 지정할지 여부입니다.

필요한 확장 설치

VSCode에서 확장은 편집기의 기능을 확장하는 데 사용할 수 있는 설치 가능한 플러그인입니다. 다음은 JavaScript 개발의 효율성을 높이는 데 도움이 되는 몇 가지 필수 확장 기능입니다.

ESLint

ESLint는 잠재적인 코드 문제를 찾고 최적화 제안을 제공하는 데 도움이 되는 코드 검사 도구입니다. ESLint를 설치하려면 VSCode에서 "Ctrl+Shift+X"(Windows/Linux) 또는 "Cmd+Shift+X"(Mac)를 눌러 확장 패널을 연 다음 "ESLint"를 검색하고 "설치"를 클릭하세요.

Prettier

Prettier는 여러 팀 구성원 간에 코드를 일관된 형식으로 유지하는 코드 서식 지정 도구입니다. Prettier를 설치하려면 VSCode에서 "Ctrl+Shift+X"(Windows/Linux) 또는 "Cmd+Shift+X"(Mac)를 눌러 확장 패널을 연 다음 "Prettier"를 검색하고 "설치"를 클릭하세요.

Chrome용 디버거

디버깅은 개발 프로세스에서 프로그래머에게 가장 중요한 기술 중 하나입니다. Chrome용 디버거는 VSCode 편집기를 Chrome 브라우저와 통합하므로 코드를 실행하는 동안 쉽게 디버깅할 수 있습니다. Chrome용 디버거를 설치하려면 VSCode에서 "Ctrl+Shift+X"(Windows/Linux) 또는 "Cmd+Shift+X"(Mac)를 눌러 확장 패널을 연 다음 "Chrome용 디버거"를 검색하고 "설치"를 클릭하세요. " ".

디버그 구성 만들기

이제 JavaScript 개발에 VSCode를 사용할 때 디버거를 사용하기 위한 디버그 구성을 만들어야 합니다. 디버그 구성을 생성하려면 VSCode의 디버거 탭을 사용하고 시작 구성 생성을 선택합니다. Node.js를 사용하는 경우 "Node.js" 구성을 선택해야 합니다.

다음은 샘플 JavaScript 디버깅 구성입니다.

{

"version": "0.2.0",
"configurations": [
    {
        "name": "Chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
    },
    {
        "name": "Node.js",
        "type": "node",
        "request": "launch",
        "program": "${workspaceFolder}/index.js"
    }
]

로그인 후 복사

}

실제 구성은 프로젝트마다 다를 수 있습니다. 디버그 구성은 일반적으로 특정 JavaScript 프레임워크 또는 라이브러리를 사용하여 구성해야 합니다.

디버거를 사용하여 디버그

디버그 구성을 생성한 후 디버거를 사용하여 JavaScript 코드를 디버깅할 수 있습니다. 디버깅을 시작하려면 "F5" 키를 누르세요. 그러면 방금 지정한 디버거(예: Chrome 또는 Node.js)가 시작됩니다. 디버거가 시작되면 이를 사용하여 코드의 중단점을 디버깅하고, 변수 값을 보고, JavaScript의 기타 특정 문제를 디버깅할 수 있습니다.

요약

이 기사를 통해 VSCode에서 JavaScript 개발 환경을 구성하는 방법을 이미 알고 계실 것입니다. 이러한 방법은 다음과 같습니다.