찾다

집  >  기사  >  운영 및 유지보수  >  Linux에서 Visual Studio Code를 사용한 프런트 엔드 개발을 위한 권장 구성

Linux에서 Visual Studio Code를 사용한 프런트 엔드 개발을 위한 권장 구성

王林
王林원래의
2023-07-04 09:27:062658검색

Linux에서 프런트 엔드 개발을 위해 Visual Studio Code를 사용하기 위한 권장 구성

소개:
프런트 엔드 개발의 급속한 발전으로 인해 점점 더 많은 개발자가 Visual Studio Code(줄여서 VS Code)를 기본 코드 편집기로 선택합니다. VS Code는 풍부한 확장 플러그인 세트를 지원하고 프런트 엔드 개발의 다양한 요구 사항을 충족할 수 있는 무료 오픈 소스 경량 편집기입니다.
이 문서에서는 설치 및 구성 단계를 포함하여 Linux에서 프런트엔드 개발을 위해 VS Code를 사용하기 위한 권장 구성을 제공하고 몇 가지 코드 예제를 첨부합니다.

1. VS Code 설치
다음 단계에 따라 Linux에 VS Code를 설치합니다.

  1. 터미널을 열고 VS Code 공식 웹사이트(https://code.visualstudio.com/)로 들어갑니다.
  2. VS Code의 Debian 패키지를 다운로드하려면 "Linux용 다운로드" 버튼을 클릭하세요.

  3. VS Code를 설치하려면 터미널에 다음 명령을 입력하세요. 

    sudo dpkg -i <vscode-package>.deb
sudo apt-get install -f

    설치가 완료된 후 "code" 명령을 입력하여 VS Code를 시작하세요.

2. 일반적으로 사용되는 확장 플러그인 설치
VS Code의 확장 플러그인은 기능을 크게 향상시킵니다. 다음은 일반적으로 사용되는 몇 가지 확장 플러그인입니다.

  1. ESLint: 코드 사양 확인을 위한 플러그인입니다.
    설치 방법: VS Code에서 "ESLint"를 검색하고 클릭하여 설치합니다.
  2. Prettier: 코드 형식 지정을 위한 플러그인으로 여러 언어를 지원합니다.
    설치 방법: VS Code에서 "Prettier - Code formatter"를 검색하고 클릭하여 설치합니다.
  3. Live 서버: HTML, CSS 및 JavaScript 파일의 변경 사항을 실시간으로 렌더링하는 로컬 개발 서버를 제공합니다.
    설치 방법: VS Code에서 "Live Server"를 검색하고 클릭하여 설치합니다.

위 플러그인 설치를 통해 개발 프로세스가 크게 단순화되었으며 코딩 효율성이 향상되었습니다.

3. ESLint 구성
프런트엔드 개발에서는 표준화되고 깔끔한 코드를 작성하는 것이 중요합니다. ESLint는 코드 일관성을 유지하는 데 도움이 되는 탁월한 코드 사양 확인 도구입니다.
다음은 ESLint를 구성하는 단계입니다.

  1. 프로젝트 루트 디렉터리에 ESLint를 설치합니다. 

    npm install eslint --save-dev

  2. 터미널에서 다음 명령을 실행하여 ESLint 구성 파일을 생성합니다. 

    npx eslint --init

    프롬프트에 따라 구성 파일의 규칙을 사용할 수 있습니다. Airbnb, Google 등에 대한 사전 설정된 규칙이 있거나 직접 정의할 수 있습니다.

  3. VS Code 설정에 다음 구성을 추가하세요. 

    "editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
}

    이렇게 하면 파일을 저장할 때마다 VS Code는 자동으로 ESLint를 호출하여 코드 사양 확인을 수행하고 오류 수정을 시도합니다.

4. Prettier 구성
Prettier는 일관된 스타일을 유지하기 위해 자동으로 코드 형식을 지정할 수 있는 코드 형식 지정 도구입니다.
Prettier를 구성하는 단계는 다음과 같습니다.

  1. Prettier를 프로젝트 루트 디렉터리에 설치합니다. 

    npm install prettier --save-dev

  2. VS Code 설정에 다음 구성을 추가합니다. 

    "editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
 "editor.formatOnSave": true
}

    이렇게 하면 JavaScript 파일을 저장할 때마다 , VS Code는 코드 형식 지정을 위해 자동으로 Prettier를 호출합니다.

5. Live Server 사용
Live Server는 로컬 개발 서버를 제공하고 HTML, CSS 및 JavaScript 파일의 수정 사항을 실시간으로 렌더링하는 매우 유용한 확장 플러그인입니다. 라이브 서버를 사용하는 단계는 다음과 같습니다.

  1. VS Code에서 프로젝트 폴더를 마우스 오른쪽 버튼으로 클릭하고 "라이브 서버로 열기"를 선택하여 로컬 개발 서버를 시작합니다.

6. 코드 예시
간단한 HTML 페이지의 코드 예시는 다음과 같습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello, world!</h1>
    <script src="script.js"></script>
</body>
</html>

위 코드에서 style.css와 script.js는 각각 스타일 파일과 스크립트 파일로, 이를 통해 실시간으로 페이지를 렌더링할 수 있습니다. 라이브 서버의 다양성.

결론:
위의 구성과 단계를 통해 Linux에서 Visual Studio Code를 사용하여 효율적인 프런트엔드 개발을 할 수 있습니다. 일반적으로 사용되는 확장 플러그인을 설치하고 코드 사양 확인 및 코드 서식 지정 도구를 구성하고 이를 Live Server에서 제공하는 로컬 개발 서버와 결합하면 개발 효율성과 코드 품질이 크게 향상됩니다. 독자들이 자신의 필요와 프로젝트 특성에 따라 더욱 확장하고 구성하여 프런트엔드 개발에 더욱 편리함과 재미를 선사할 수 있기를 바랍니다.

위 내용은 Linux에서 Visual Studio Code를 사용한 프런트 엔드 개발을 위한 권장 구성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html for JS visual studio visualstudio visual studio code https linux 代码规范 debian
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Git을 통해 Linux 시스템에서 팀 협업을 위한 구성 방법다음 기사：Git을 통해 Linux 시스템에서 팀 협업을 위한 구성 방법

관련 기사

더보기