VS Code에서 Prettier용 Ruby 플러그인 설치

Prettier는 적어도 확장 시장에서 다운로드 수를 기준으로 한다면 VS Code의 프런트 엔드 언어를 위한 최고의 코드 포맷터 확장입니다. JavaScript와 React를 배우는 동안 포맷팅과 타이핑 효율성을 개선하고 제대로 포맷된 코드가 실제로 어떻게 보이는지 알려주는 데 매우 유용하다는 것을 알았습니다.

Ruby를 배우기 시작했을 때 나는 prettier의 사용 용이성을 몹시 놓치고 있었고 마침내 동일한 기능을 얻기 위해 Prettier용 Ruby 플러그인을 설치하기로 결정했습니다. 그러나 설치가 예상보다 까다로워서 TA Wills Blake의 추가 도움을 받아야 했습니다. 함께, 우리는 그것을 알아냈습니다. 지침은 다음과 같습니다.

플러그인은 VS Code에서 열리는 모든 새 프로젝트에서 자동으로 사용할 수 있도록 전역적으로 설치해야 합니다. 그러나 플러그인을 설치하기 위한 instructions provided by Prettier은 모호하며 플러그인이 각각의 새 프로젝트에 대한 종속성으로 설치되어야 함을 의미하는 것 같습니다. 이를 위해서는 gemfile 생성, 종속성 추가 등이 필요합니다..... 아니, 우리는 그들이 Prettier Plugins page 에서 설명하는 것을 하고 싶습니다. 해당 페이지에 나와 있듯이 "플러그인은 prettier가 있는 동일한 node_modules 디렉토리에 설치되어 있으면 자동으로 로드됩니다."; 그럼 그 디렉토리를 찾아봅시다.

따라야 할 단계:

VS Code에 Prettier 확장 프로그램을 이미 설치했는지 확인하십시오

.

명령줄에 cd를 입력하거나 새 CLI 창을 열어 홈 디렉토리로 이동합니다

.

숨겨진 디렉토리를 포함하여 모든 디렉토리를 표시하려면 ls -a를 입력하십시오

.

Windows에서 WSL을 사용하는 경우 .vscode-server 디렉토리가 표시되어야 합니다. macOS를 사용 중인 경우 간단하게 .vscode 이어야 합니다. cd를 사용하여 둘 중 시스템에 적용되는 항목

으로 이동합니다.

cd extensions로

esbenp.prettier-vscode-<version>라는 제목의 디렉토리가 있어야 합니다(예: 내 디렉토리는 esbenp.prettier-vscode-9.5.0 ). cd 그것으로

CLI

에 npm install --save-dev prettier @prettier/plugin-ruby를 입력합니다.

설치가 완료될 때까지 기다린 다음 VS Code를 다시 시작합니다

.

이제 VS Code의 Ruby 문서를 마우스 오른쪽 버튼으로 클릭하고 "문서 형식"을 선택할 수 있습니다. 기본적으로 저장할 때 포맷할 수도 있습니다. 그렇지 않은 경우 다음 단계를 사용하여 VS Code 설정 파일로 이동할 수 있습니다.

ctrl(또는 macOS의 경우 cmd) + shift + P 누르기

settings.json를 입력하고 "기본 설정: 설정 열기(JSON)"

를 선택합니다.

json 파일을 아래로 스크롤합니다. javascript 코드의 기본 포맷터로 prettier를 지정하는 개체가 이미 있어야 합니다.

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

그 아래에 다음을 추가합니다.

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

최종 결과에는 두 가지 설정이 모두 포함되어야 합니다.

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