내 Visual Studio 코드 설정

16071 단어 vscodevisualstudiocodedevelopertoolstexteditor
이 글도 iamdeveloper.com에서 찾을 수 있다.
이것은 원래 just a gist이었지만, 나는 그것을 블로그 게시물로 바꾸는 것이 의미가 있다고 생각한다.
올해 stateofjs.com 조사에서 지적한 바와 같이 Visual Studio 코드는 많은 웹 개발자들의 editor of choice이 되고 있다.
액체 오류: 내부 오류
VS Code은 제가 선택한 편집자입니다.이것은 웹 개발자에게 매우 좋습니다. 만약 당신이 TypeScript을 사용하여 개발을 하고 있다면 이것은 절대로 좋은 선택입니다.재미있는 사실...이것은 타자 원고로 쓴 것이다.TypeScript에 대해 더 많은 정보를 알고 싶으시면 제 블로그 게시물을 보십시오.
TypeScript는 VS 코드에 대한 재구성 및 스마트 인식 기능을 제공합니다.이게 제일 멋있는 부분이야.Automatic Type Acquisition을 통해 TypeScript를 사용하지 않아도 지능적인 감지를 받을 수 있다.
그래, 우리 시작하자.이것은 나의 현재 Visual Studio Code 설정이다.

확장성


VS 코드는 marketplace의 확장성을 제공합니다.확장 외에도 2017년에는 extension packs을 제공했다.tl;박사님, 그것들은 한 조의 확장자입니다.
Settings Sync은 필수적인 확장입니다. 첫 번째 확장자로 설치하는 것을 권장합니다.이 확장이 있으면 대부분의 설정을 개인 컴퓨터에 백업할 수 있다.그곳에서 당신의 설정을 회복하는 것은 상당히 쉽다.이것은 백업 설정과 동기화 설정에 매우 적합하다. 이것은 내가 일과 개인 노트북 사이에서 하는 일이다.

Node/JS


  • Node extension pack(필수)
  • Import Cost

    • 포맷/보풀

  • Prettier - Code formatter
  • EditorConfig
  • TSLint
  • Prettify JSON
  • markdownlint
  • ESLint

    • CSS

  • IntelliSense for CSS class names
  • Color Highlight
  • Color Picker
  • HTML CSS Support
  • Color Highlight

    • 디버깅


    Go와 Python 같은 언어 확장은 설치 후 특정 언어를 디버깅할 수 있는 모든 적절한 도구를 설정할 수 있습니다.조금 더 있습니다.디버깅을 시작하는 가장 간단한 방법은 F5입니다. VS 코드는 디버깅 설정을 제공합니다.
  • Debugger for Chrome

    • 지트


  • Git extension pack(필수)
  • Git Blame
  • gitflow
  • Open in GitHub / Bitbucket / Gitlab / VisualStudio.com !

    • 단원 테스트

  • JavaScript Unit Test snippets
  • Jest

    • 리액션

  • React Redux ES6 Snippets
  • Reactjs code snippets
  • vscode-styled-components

    • 기타 언어

  • Go
  • Python

    • 답변/놀이터


  • Quokka.js(Introducing Quokka... 참조)

    • 관중.

  • Image Preview
  • SVG Viewer
  • View in Browser

  • 2018/02/16:Polacode을 업데이트합니다. 그 자체는 뷰어가 아니라 코드 단편의 아름다운 이미지를 촬영하는 좋은 방법입니다.
    • 액체 오류: 내부 오류

    드워스의 물건

  • Jenkinsfile Support
  • Docker

    • 공격 편집

  • Guides

  • Custom CSS and JS Loader(현재 Cobalt 2 theme용)
    • 2018년 1월 28일 업데이트: 맞춤형 CSS와 JS 로더도 두 가지 글씨체를 사용하여 조작자의 단일 채널 외관을 얻을 수 있다.아래의 추문을 보십시오.하지만 나는 확실히 몇 가지 문제에 부딪혔다.가장 중요한 점은 CSS 클래스 이름이 변경되었다는 것입니다.전체 트윗만 읽으면 모든 정보를 얻을 수 있다.
    액체 오류: 내부 오류
    TLDR;https://gist.github.com/nickytonline/8086319bf5836797ee3dea802a77000d을 보십시오.(블로그 게시물의 또 다른 요점일지도 모른다.😉). 최종 결과는 이렇다.나는 아직 코드 속의 초서를 좋아하는지 확실하지는 않지만, 아마도 나는 그것을 좋아할 것이다.

    기타

  • Project Manager
  • Bookmarks
  • Gatsby Snippets
  • XML Tools

    • 메시지

  • Cobalt 2
  • Dracula theme
  • One Dark Pro
  • Material theme

    • 현재 테마 설정


    나는 지금 Cobalt 2 주제와'어각어부 아그노스트'주제를 함께 돌리고 있다.

    나는 여전히 Dracula theme을 어각 어부의 어릿광대 주제와 결합시켜 사용하는 것을 좋아하지만, 나는 그래도 그것을 좀 높여야 한다고 생각한다.

    나는 또한 One Dark Pro과 Material theme을 사용했는데 그것들도 매우 좋다.

    껍데기


    나는 지금 Fish Shell과 Fisherman으로 불가지론의 주제를 표시하고 있다.

    글꼴


    나는 VS 코드에서 Fira Code을 사용한다.일단 installed Fira코드가 생기면 코드의 설정은 매우 쉽다.

    사용자 설정을 열고 다음을 추가합니다.
      // Controls the font family.
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  // Controls the font size.
  "editor.fontSize": 14,
    번영!밥은 네 삼촌이야. 너는 지금 Fira코드가 생겼어. 이것은 아주 좋은 연자야.

    사용자 정의 키 바인딩


    // Place your key bindings in this file to overwrite the defaults
[
  {
    "key": "cmd+shift+z",
    "command": "workbench.action.terminal.focus"
  },
  {
    "key": "cmd+shift+a",
    "command": "workbench.action.terminal.focusNext"
  },
  {
    "key": "cmd+shift+s",
    "command": "workbench.action.terminal.focusPrevious"
  },
  {
    "key": "cmd+shift+x",
    "command": "workbench.action.terminal.kill"
  }
]
    또한 VisualStudio 코드에 대한 유용한 팁을 찾고 있다면 www.vscodetips.com을 참조하십시오.내가 진정으로 기대하는 마지막 일은 Live Share의 가용성이다.
    질문 아니면 댓글?나한테 전화해.
    [boost 학습노트] 명령행 분석 라이브러리(program options)
    QQ 공간 대량 삭제 설명

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage