정보실

웹학교

정보실

javascript 자바 스크립트 개발자를 위한 26 VS 코드 도구

본문

2019 년도의 26 개 자바 스크립트 개발자를 위한 기적의 VS 코드 도구.

Visual Studio 코드 (더 일반적으로 VS 코드라고 함)는 데스크톱에서 실행되는 가볍지 만 강력한 크로스 플랫폼 소스 코드 편집기입니다.

TypeScript 및 Chrome Debugger와 같은 개발 도구에 대한 지원 기능이 내장되어 있으므로 필자는 프로젝트를 빌드하는 데 더 많은 시간을 할애하여 에디터와 사랑에 빠지게 되었습니다.


https://dev.to/jsmanifest/26-miraculous-vs-code-tools-for-javascript-developers-in-2019-50gg 


대중이 사용하고 기여할 수 있는 공개 소스 확장을 좋아하지 않는 사람은 누구입니까?

개발 키트에 추가 할 툴을 찾고 있다면 이 기사가 새로운 툴을 찾는 데 도움이 되기를 바랍니다.


이러한 도구는 모두 JavaScript 언어 용으로 특별히 제작 된 것은 아니지만 공통 관심사를 공유하는 여러분과 저는 같은 자바 스크립트 개발자 용 도구입니다. 자바 스크립트 개발자로서, 인간의 Five Senses 중 5 개 중 3 개를 회전 시키는 여러 측면에서 개발 흐름을 향상 시키는 것을 공유 할 것입니다.


2019 년에 26 개의 기적의 자바 스크립트 개발자 용 VS 코드 도구가 있습니다.


1. Project Snippets 


목록에서 처음으로 맨 처음으로 내 모든 시간을 좋아하는 프로젝트 스 니펫 - VS 코드에서 원래의 사용자 스 니펫에서 파생 된입니다.


사용자 스 니펫에 익숙하지 않은 경우 기본적으로 이 기능을 사용하면 프로젝트 전체에서 다시 사용할 수 있는 고유 한 코드 스 니펫을 만들 수 있습니다.


그러나 "재사용"한다는 것은 정확히 무엇을 의미합니까?


음, 자주 아래와 같은 상용구를 작성하는 경우가 있습니다.


import { useReducer } from 'react'

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

const useSomeHook = () => {
  const [state, dispatch] = useReducer(reducer, initialState)

  return {
    ...state,
  }
}

export default useSomeHook


실제로 전체 내용을 쓰거나 (복사하여 붙여 넣는) 대신 사용자 지정 접두사를 입력하여 구성한 스니펫을 생성하기만 하면 됩니다.


파일> 환경 설정> 사용자 스니펫으로 이동하는 경우 새 전역 스니펫 파일을 클릭하여 새 글로벌 스니펫을 선택적으로 만들 수 있습니다.


예를 들어, TypeScript React 프로젝트에 대한 자신의 스 니펫 파일을 만들려면 New Global Snippets File을 클릭하고 typescriptreact.json을 입력하면 TypeScript를 사용하여 작성된 반응 응용 프로그램에 사용할 수 있는 새로 만든 .json 파일로 이동합니다 .


예를 들어 위의 코드 예제에서 사용자 스니펫을 만들려면 다음과 같이하십시오.


{
  "const initialState = {}; const reducer = (state, action)": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "const reducer = (state, action) => {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}"
    ]
  }
}


그 자리에, .tsx로 끝나는 새로운 타이프 스크립트 파일을 만들 수 있습니다. 접두사 rsr을 입력하면 스니펫을 생성하라는 제안이 나타납니다.

해당 팝업의 탭을 누르면 다음 스니펫이 생성됩니다.


const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}


그러나 이 문제는 모든 프로젝트 (일부 경우 일반 스니펫에 대해 강력 할 수 있음)를 통해 지속될 수 있다는 점에서 문제가 됩니다.

일부 프로젝트는 조금 다르게 구성되며, 특정 유스케이스를 구분할 필요가 있을 때 스니펫을 구성하는 전역 파일이 문제가 되기 시작합니다.

예를 들어, 프로젝트 구조가 프로젝트마다 다른 경우를 예로 들 수 있습니다.


{
  "import Link from components/common/Link": {
    "prefix": "gcl",
    "body": "import Link from 'components/common/Link'"
  },
  "border test": {
    "prefix": "b1",
    "body": "border: '1px solid red',"
  },
  "border test2": {
    "prefix": "b2",
    "body": "border: '1px solid green',"
  },
  "border test3": {
    "prefix": "b3",
    "body": "border: '1px solid magenta',"
  }
}


이 특정 파일 / 폴더 구조를 가진 프로젝트에는 충분할 수 있지만, Link 구성 요소가 구성 요소 / 링크와 같은 경로가 있는 다른 프로젝트에서 작업하는 경우에는 어떻게 됩니까?


세 개의 테두리 테스트가 값을 작은 따옴표로 묶는 방법을 주의하십시오 : border : '1px solid red'.

이것은 자바 스크립트에서 완벽하게 유효하지만, 스타일이 지정된 구성 요소를 프로젝트의 스타일 솔루션으로 사용한다면 어떨까요?

스타일이 지정된 구성 요소는 일반적인 CSS 구문을 사용하기 때문에 이 구문은 해당 작업 영역에 더 이상 적용 할 수 없습니다!

프로젝트 스니펫을 사용하면 프로젝트/작업 영역 수준 조각을 선언하여 조각이 충돌하지 않고 다른 프로젝트를 오염시키지 않도록 할 수 있습니다. 굉장히 유용합니다!


2. Better Comments 


코드 사이에 주석을 쓰고 싶다면 코드가 때때로 혼잡해질 수 있기 때문에 과거에 작성한 특정 위치의 검색에 약간의 좌절감을 느낄 수도 있습니다.


Better Comments를 사용하면 색상이 있는 주석을 삽입하여 주석을 보다 분명하게 작성할 수 있습니다.


better-comments 


3. Bracker Pair Colorizer 


처음이 확장 기능의 스크린 샷을 보았을 때 나는 이 개발 툴킷을 채택하고 도입해야 한다는 것을 알았습니다.

코딩은 나의 열정이고 열정은 재미 있어야 합니다. 그래서 그 사고 방식으로, 이것은 내가 더 많이 하고 싶은 것을 즐기는 데 분명히 도움이 됩니다.


약간의 사실은 혈액 흐름과 각성에 영향을 줄 수 있기 때문에 약간의 색상이 개발 흐름의 속도를 높일 수 있다는 것입니다. 다른 말로 하면 - 단지 즐겁게 지내는 것이 아니라 작업 흐름에 색상을 추가하여 건강을 향상 시키는 것입니다.


bracketpaircolorizer 


4. Material Theme 


Material Theme는 다음과 같이 코드를 VS ​​코드에 바로 설치할 수 있는 장엄한 테마입니다.


material-theme 


그것은 최고의 테마 중 하나가 되어야 합니다. 나는 테마가 얼마나 굉장한 지에 대해 자세히 설명 할 수 있을 지 모르겠습니다. 그러나 이것은 굉장합니다.


5. @typescript-eslint/parser 


TypeScript 사용자 인 경우 : TSLint 뒤에 있는 직원이 올해 언젠가 TSLint를 사용하지 않을 계획을 발표하면서 ESLint + TypeScript 구성 방식을 사용하도록 tslint 구성을 이동해야 합니다.


프로젝트는 점진적으로 @ typescript-eslint / parser 및 관련 패키지를 채택하여 프로젝트의 미래 보장 설정을 보호합니다. 새로운 설정을 사용하면 대부분의 ESLint 규칙과 호환성을 더 예리하게 활용할 수 있습니다.


6. Stylelint 


나에게 있어서, stylelint는 여러 가지 이유로 내 모든 프로젝트에서 반드시 필요합니다.


  1. 오류를 방지하는 데 도움이 됩니다.
  2. 그것은 CSS에서 스타일 규칙을 시행합니다.
  3. 더 예쁜 지원과 함께 합니다.
  4. 그것은 css / scss / sass / less를 지원합니다.
  5. 커뮤니티에서 작성한 플러그인을 지원합니다.

7. Markdownlint + Docsify 


이제는 당신이나 다른 개발자들이 자신들의 프로젝트에 대해 브레인 스토밍을 할 때 어떻게 메모를 하고 싶은지 잘 모르겠지만 필자는 메모 형식으로 메모를 작성하는 것을 좋아합니다.


하나는 이해하기 쉽습니다. markdownlint를 포함하여 가격 인하 텍스트 작성 프로세스를 용이하게 하는 풍부한 도구가 있습니다. Markdownlint는 .md 파일 내부의 스타일 검사를 지원하는 코드 확장 프로그램입니다. 더 신선한 부분은 더 예쁘게 서식을 지원한다는 것입니다!

또한 개인적으로 Docsify를 모든 프로젝트에 설치하고 싶습니다. 각 프로젝트에 대한 markdown와 기타 개선 사항을 지원합니다.


8. TODO Highlight 


내 응용 프로그램 코드에는 todos를 쓰는 습관이 있으므로 TODO Highlight와 같은 확장 기능은 프로젝트 전반에 걸친 토드를 강조하는 데 정말로 유용합니다.


9. Import Cost 


Import Cost은 처음 시도 할 때 매우 유용하게 쓰이는 도구 중 하나입니다.

그러나 잠시 후 더 이상 도구가 필요 없다는 것을 깨닫기 시작할 것입니다. 왜냐하면 그것이 시간이 지남에 따라 이미 알고 있는 것을 알려주기 때문입니다.

그럼에도 불구하고 이 도구를 유용하게 사용할 수 있기 때문에 이 도구를 잠시 사용하십시오.


10. Highlight Matching Tag 


때로는 태그의 다른 쪽 끝을 일치 시키려 애쓰는 경우가 있습니다. 그것은 하이라이트 매칭 태그가 당신의 좌절감을 없애는 곳입니다 :


highlightmatchingtag 


11. vscode-spotify 


좌절감을 말하면 음악 재생기로 돌아가 음악을 전환 한 다음 코드를 다시 실행하여 계속하고 있는 일을 계속해야 하는 불편 함이 있습니다. 이것이 바로 vscode-spotify가 제공되는 곳입니다. 왜냐하면 vsode 내부에서 바로 식별 할 수 있기 때문입니다!


이 확장 기능을 사용하면 상태 막대에서 현재 재생중인 노래를 보고 단축키를 눌러 노래를 전환하고 자리를 조절할 수 있는 버튼을 클릭하여 더 많은 노래를 볼 수 있습니다.


11. GraphQL for VSCode 


GraphQL은 JavaScript 커뮤니티의 모든 영역에서 볼 수 있기 시작하면서 끊임없이 성장해 왔습니다.

GraphQL 구문을 처리 할 때 구문 강조, linting 및 자동 완성 기능을 활용하지 않으면 VSCode 용 GraphQL을 코드에 설치하는 것이 좋습니다.


저는 개인적으로 GatsbyJS를 많이 사용합니다. 따라서 일상적인 코딩 작업에는 GraphQL 구문 읽기가 다소 복잡합니다.


12. Indent Rainbow 


위의 하이라이트 매칭 태그와 유사한 이유. 들여 쓰기를 통해 길 찾기에 어려움이 있다면, 들여 쓰기 레인보우는 들여 쓰기를 읽기 쉽게 만들어줍니다.


indent-rainbow 


13. Color Highlight 


이것은 모든 사람들이 나에게 묻는 확장 기능 중 하나입니다. "어디서 얻었습니까?" 그들이 아직 이 확장을 만나지 않았다면.

기본적으로 색상 강조 표시는 코드 내부의 색상을 다음과 같이 강조 표시합니다.


color-highlight 


14. Color Picker 


색상 선택기는 CSS 색상 표기와 같은 색상 코드를 선택하고 생성하는 데 도움이 되는 그래픽 사용자 인터페이스를 제공하는 vscode 확장 프로그램입니다.


15. REST Client 


처음으로 REST Client에 대해 읽었을 때 나 자신을 위해 시험해 보았을 때 Postman과 같은 확립 된 소프트웨어에 비해 매우 유용한 도구처럼 보이지 않았습니다.


그러나 REST 클라이언트 확장 프로그램을 더 많이 사용할수록 API를 테스트 할 때 내 개발 도구에 어느 정도 영향을 줄 수 있는지 알았습니다.


새 파일을 만들고 이 파일을 한 줄만 만들면 됩니다.


https://google.com


HTTP GET 요청을 만들려면 명령 행 팔레트 (CTRL + SHIFT + P)로 가서 Rest Clients : Send Request를 클릭하면 됩니다. 응답 세부 정보를 초 단위로 요청하십시오.


굉장히 유용합니다:


rest-client1 


아래에 몇 줄만 추가하면 POST 요청에 매개 변수를 전달하거나 본문 데이터를 요청할 수도 있습니다.


POST https://test.someapi.com/v1/account/user/login/
Content-Type: application/json

{ "email": "someemail@gmail.com", "password": 1 }

그러면 body 매개 변수 { "email": "someemail@gmail.com", "password": 1}로 POST 요청을합니다.


그러나 그것은 단지 확장의 가능성의 표면을 긁어 모으고 있습니다. 더 자세히 알아 보려면 그것에 대해 읽어보십시오.


16. Settings Sync 


필자는 내 개발 도구에서 사용하는 확장 기능의 메모 마크 다운 목록을 수동으로 적어두고 Settings Sync가 구할 수 있을 때까지 Evernote와 같은 메모 서비스에 저장하는 것을 싫어했습니다.


기본적으로 요점 / github 계정이 필요하며, 개인 설정을 요점 계정에 업로드하려면 SHIFT + ALT + U를 눌러야 하는 설정 (키 바인딩, 스 니펫, 확장 등)을 저장할 때마다 다음 번에 다른 컴퓨터에 로그인하거나 다시 포맷 할 때 SHIFT + ALT + D를 누르면 즉시 설정을 즉시 다운로드 할 수 있습니다.


17. Todo Tree 


Todo Tree는 애플리케이션 코드 전체에서 생성 한 모든 작업을 단일 트리로 가져와 패널의 왼쪽에서 한 번에 모두 볼 수 있도록 도와줍니다.


todo-tree-1 


18. Toggle Quotes 


Toggle Quotes는 따옴표 사이를 전환 할 수 있는 재미있는 유틸리티 확장 프로그램입니다.

문자열 보간법을 사용할 때 역 따옴표로 전환해야 할 때 특히 유용합니다. 특히 문자열을 작은 따옴표로 pretty하는 습관이 있는 경우 유용합니다.


toggle quotes for vs code 


19. Better Align 


Better Align을 사용하여 먼저 코드를 선택하지 않고 코드를 정렬 할 수 있습니다.


사용 방법 : 정렬 할 코드에 커서를 놓은 다음 CTRL + SHIFT + P (또는 명령 팔레트를 열려면 사용자 정의 된 바로 가기가 무엇이든 간에) 명령 팔레트를 팝업으로 열고 정렬 명령을 호출합니다.


20. Auto Close Tag 


자동 닫기 태그는 처음 VS 코드를 시작한 날부터 유용했습니다. <div, 슬래시 뒤에 오는 것을 입력 할 수 있으며 마지막 화살표를 완성합니다. 이것은 기본적으로 코드 대 코드에 없는 것이므로 매우 유용합니다 :)


21. Sort Lines 


배열이 알파벳순으로 정렬되지 않은 경우 좌절감을 느끼는 습관이 있습니다. 다행히도 정렬 선과 같은 도구가 있어 내 삶을 편하게 해줍니다. 비슷한 방식으로 좌절한다면 이 점이 도움이 될 것입니다.


22. VScode Google Translate 


나는 이 유용한 것을 발견하는 유일한 사람일지도 모르지만 Google 번역은 다국어 인 프로젝트에 참여하면서 프로젝트에서 도움이 됩니다. 편집자를 떠나고 싶지 않은 경우 유용합니다.


23. Prettier 


Prettier는 JavaScript / TypeScript / 등을 자동으로 포맷하는 코드 대 확장 기능입니다. 더 예쁘게 사용하는 코드.


24. Material Icon Theme 


특히 어두운 테마에서 작업 할 때 파일 형식이 어느 것인지 눈에 조금 더 분명하기 때문에 다른 아이콘 테마보다 Material Icon Theme를 선호합니다.


25. IntelliSense for CSS Class Names in HTML 


HTML의 CSS 클래스 이름에 대한 IntelliSense는 작업 영역에 있는 정의를 기반으로 HTML 클래스 특성을 기반으로 하는 CSS 클래스 이름 완성입니다.


26. Path IntelliSense 


경로 Intellisense는 파일 이름을 자동 완성하는 코드 확장자입니다.





페이지 정보

조회 55회 ]  작성일19-07-15 22:25

웹학교