추가 (2019/08/27)

prettier-vscode 2.2로 올리면,
이하 링크해 주신 기사대로 prettier-ruby 가 효과가 없어지므로 추기.

prettier-ruby VSCode Formatter가 prettier-vscode 1.10.0에서 망가졌습니까? 때때로 보는 개선 방법

기사를 참고로 prettier-ruby 의 도입 위치를 프로젝트 폴더 아래로 변경하면 동작하게 되었습니다.

절차:

prettier-vscode 재설치

$ rm -rf ~/.vscode/esbenp.prettier-vscode-x.x.x 삭제

VSCode에 다시 설치

프로젝트 폴더에서 prettier-ruby 가져오기

$ cd <PROJECT_PATH> ; yarn add --dev prettier @prettier/plugin-ruby

굿즈씨 대단히 참고가 되었습니다! m(_ _)m

＠코시_ぃふぇ 입니다.

Prettier이 멋지다는 이야기였기 때문에, Ruby판의 prettier-ruby을 VSCode상에서 Ruby파일을 보존시에 자동으로 포맷되도록(듯이) 설정해 보았습니다.

VSCode의 설정

STEP1. Prettier 확장 설치

VSCode prettier-vscode 확장을 설치합니다.

2단계. Ruby용 플러그인 설치

prettier-ruby VSCode formatOnSave 를 참고했습니다.

STEP1에서 도입한 확장이 설치되어 있는 디렉토리(2019/08/27 추가로)
프로젝트 디렉토리로 이동하여 Ruby용 플러그인을 설치합니다.

# [2019/08/27 追記] 以前のバージョンでは動作したが
# prettier-vscode 2.2 では動作しなかったのでコメントアウト
# $ cd ~/.vscode/extensions/esbenp.prettier-vscode-1.8.1/

# 対象プロジェクトでインストール
$ cd <PROJECT_PATH>
$ npm install @prettier/plugin-ruby

※ Version 부분은 바꾸는 편이 좋을지도 모릅니다.

STEP3. VSCode의 settings.json에 가필

settings.json 에 이하, Ruby 파일 보존시에 포맷터를 거는 설정을 가필.

    "[ruby]": {
        "editor.formatOnSave": true
    },

참고 캡처: settings.json 열 때까지

Preferences -> Settings

{ } 선택

settings.json 수정

세세한 설정

README.md#configuration 참조.

일괄적으로 Format하고 싶다면 커맨드 라인

명령줄 설치

희귀 D 째. MD 에 써 있는 package.json 가 있다고 가정해 이하로 인스톨.

# npm の場合
$ npm install --save-dev prettier @prettier/plugin-ruby

# yarnの場合
$ yarn add --dev prettier @prettier/plugin-ruby

사용법

# README.md より
$ ./node_modules/.bin/prettier --write path/to/file.rb

# 例: hoge.rb に適用
$ ./node_modules/.bin/prettier --write hoge.rb 
hoge.rb 612ms

# 例: appディレクトリ以下のRubyファイルに一括適用
$ find app -name *.rb | xargs node_modules/.bin/prettier --write
app/models/a.rb 311ms
app/models/b.rb 292ms
app/models/c.rb 342ms
app/models/d.rb 287ms
app/models/e.rb 229ms
...

참고

VSCode에서 자동 성형 도구의 prettier로 자동 포맷되도록