Ruby on Rails 개발자를 위한 VS Code 확장

2020년 9월 9일 Medium에서 원래 게시되었습니다.

Rails 개발자를 위한 강력한 확장.

Ruby는 개발자의 행복을 염두에 두고 만들어졌습니다. 그러나 편집기가 올바르게 설정되지 않은 경우 고통스러운 여정에 처하게 됩니다. VS Code에서 올바른 확장을 찾으면 오랜 시행착오를 겪을 수 있습니다.

다음은 Ruby on Rails 개발자를 위한 강력한 확장 기능 목록입니다.

루비

루비

루비 솔라그래프

엔드와이즈

ERB 도우미 태그

Rails DB 스키마

루보캅

ERB 포맷터

ERB의 에밋

일반적인

아톰 다크 테마

VSCode-아이콘

도트ENV

출력 컬러라이저

자동 이름 바꾸기 태그

하이라이트 매칭 태그

브라켓 페어 컬러라이저 2

루비

1. 루비

이것은 그 자체로 말합니다. Ruby 구문 강조.

2. 루비 솔라그래프

코드를 작성하는 동안 지능형 코드 완성 및 문서화.

3. 엔드와이즈

현명하고 즉시 끝을 닫는 것을 잊지 마십시오.

4. ERB 도우미 태그

시간을 절약할 수 있는 유용한 바로 가기.

5. 레일즈 DB 스키마

입력하는 동안 정의된 데이터베이스 스키마에 대한 빠른 통찰력을 얻으십시오.

6. 루보캅

Ruby 작성을 위한 코드 포맷터.



다음 오류가 발생하면 this guide을 따라 올바른 실행 경로를 연결하십시오.

rubocop is not excutable 
execute path is empty!

7. ERB 포매터/미화

VS Code에서 html.erb 파일을 들여쓰기할 수 없다는 것은 정말 고통스러운 일입니다. ERB Formatter는 htmlbeautifier gem에 의존하므로 해당 의존성도 설치해야 합니다: gem install htmlbeautifier .

"files.associations": {
  "*.erb": "erb"
},
"[erb]": {
  "editor.defaultFormatter":"aliariff.vscode-erb-beautify" ,
},
"[html]": {
  "editor.defaultFormatter": "aliariff.vscode-erb-beautify",
},
"files.associations": {
  "*.erb": "erb"
}

8. ERB의 에멧

그것은 확장이 아니지만 당신이 정말로 원하는 것입니다. html.erb 파일을 작성하는 경우 HTML에서 사용 가능한 emmet에 액세스할 수 있기를 원합니다. 다음 설정이 필요합니다.

"emmet.includeLanguages": {
        "erb": "html"
      },
"emmet.showAbbreviationSuggestions": true,
"emmet.showSuggestionsAsSnippets": true

일반적인

1. 아톰 원 다크 테마

편집자의 주제는 개인적인 선택입니다. 보기에 좋은 것을 선택하고 유용한 구문 강조를 제공합니다. 또는 Material Theme를 확인하십시오.

2. VS 코드 — 아이콘

아름다운 아이콘을 사용하면 폴더와 파일 유형을 쉽게 구분할 수 있습니다.

3. 도트ENV

.env 파일에 대한 구문 강조 표시.

4. 출력 컬러라이저

색상이 지정된 로그 파일을 사용하여 로그를 쉽게 읽을 수 있습니다.

5. 자동 이름 바꾸기 태그

닫는 태그를 선택하는 데 소요되는 시간을 50% 절약하십시오.

6. 매칭 태그 하이라이트

여는 태그와 닫는 태그를 즉시 찾아냅니다. 또한 태그를 선택할 때 왼쪽 및 오른쪽 셰브론(< …. >)을 모두 강조 표시하는 선택적 사용자 지정 구성을 추가했습니다.

"highlight-matching-tag.enabled": true,
"highlight-matching-tag.styles": {
   "opening": {
     "left": {
       "custom": {
         "borderWidth": "0 0 0 1px",
         "borderStyle": "solid",
         "borderColor": "yellow",
         "overviewRulerColor": "white"
       }
     },
     "right": {
       "custom": {
         "borderWidth": "0 1px 0 0",
         "borderStyle": "solid",
         "borderColor": "yellow",
         "overviewRulerColor": "white"
       }
     },
     "name": {
       "underline": "yellow"
     }
   }
 }

7. 브래킷 페어 컬러라이저 2

JavaScript 구문 강조 표시 및 서식 지정은 VS Code에서 광범위하게 다룹니다. 사용하는 프레임워크에 따라 다른 확장도 추가할 수 있습니다.




읽어 주셔서 감사합니다!

* Unsplash에 있는 @sejadisruptivo의 사진.