rails-template-inspector 소개: 브라우저 요소를 클릭하여 보기 파일 열기

7530 단어 railsrubyrailstemplateinspector
(이 게시물은 원래 일본어로 작성된 내 동료입니다. 원본 게시물here.을 읽을 수 있습니다.)

Rails 애플리케이션용 JS 패키지인 rails-template-inspector의 릴리스를 발표하게 되어 기쁩니다. 이를 사용하여 다음 작업을 수행할 수 있습니다.
  • 요소가 작성된 템플릿을 마우스로 가리키면 확인할 수 있습니다.
  • 요소를 클릭하여 로컬 편집기에서 템플릿 파일을 열 수 있습니다.
  • 번들러 없음, npm 없음. 바닐라 JS에서 제공하기 때문에 CDN을 통해서만 사용할 수 있습니다.
  • xray-rails 과 달리 최신 Rails 환경을 지원합니다.



    • 사용하는 방법


    true에서 다음 값을 config/environments/development.rb로 설정합니다.

    config.action_view.annotate_rendered_view_with_filenames = true
    <% if Rails.env.development? %> 블록을
    레이아웃 파일:

    <!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>

<%= yield %>

<% if Rails.env.development? %>
  <script type="module" src="https://cdn.skypack.dev/@aki77/rails-template-inspector"></script>
  <rails-inspector url-prefix="vscode://file" root="<%= Rails.root %>" combo-key="command-shift-v"></rails-inspector>
<% end %>
</body>
</html>

    이 패키지는 사용자 정의 URL 체계를 사용하여 편집기에서 보기 파일을 열므로 선호하는 편집기에 따라 url-prefix 요소의 <rails-inspector> 속성을 변경하십시오. 다음은 예입니다.
  • 비주얼 스튜디오 코드: vscode://file
  • 루비마인: x-mine://open?file=
  • 맥빔: mvim://open?url=file://
  • 이맥스: emacs://open?url=file://

    • 일하는 방법


    config.action_view.annotate_rendered_view_with_filenames 를 활성화하면 이 패키지는 Rails에서 생성된 HTML 주석을 검색할 수 있습니다. 또한 Lit을 사용하여 사용자 정의<rails-inspector> 요소를 구현합니다.

    즐겁게 즐기시기 바랍니다rails-template-inspector !


    aki77 / 레일 템플릿 검사기






    <레일 검사기>


    이 사용자 정의 요소를 사용하면 사용자가 간단한 클릭만으로 브라우저 요소에서 직접 로컬 IDE 코드로 이동할 수 있습니다. Rails 템플릿을 지원합니다.

    용법


    config/environments/development.rb에서:
    config.action_view.annotate_rendered_view_with_filenames = true

    app/views/layouts/application.html.haml에서:
    <!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>

<%= yield %>

<% if Rails.env.development? %>
  <script type="module" src="https://cdn.skypack.dev/ /rails-template-inspector@^0.3.0"></script>
  <rails-inspector url-prefix="vscode://file" root="<%= Rails.root %>" combo-key="command-shift-v"></rails-inspector>
<% end %>
</body>
</html>

    속성


  • url-prefix : 편집기에 대한 사용자 정의 URL 체계입니다. (기본값: vscode://file )
  • 예

  • 비주얼 스튜디오 코드: vscode://file

  • RubyMine: x-mine://open?file=

  • 맥빔: mvim://open?url=file://

  • 이맥스: emacs://open?url=file://


  • combo-key : 검사기를 전환하는 키입니다. (기본값: meta-shift-v )
  • 임의 개수의 수식어…



    • View on GitHub
    Android Studio에서 Flutter 템플릿 프로그램을 시작해 봅시다.
    반응이 있는 Google 지도

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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