質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

0回答

1694閲覧

vs code, .html.erbファイル内でhtml emmetを使用する方法

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2022/01/05 22:42

編集2022/01/05 23:02

vscodeでrailsを使ったアプリを開発中です。
vscodeのversionは1.62.3、railsはversion: 7.0.0です。

html.erb拡張因子を持つファイルでhtmlのemmetを使いたいです。

googleで解決方法を探し以下のようにsetting.jsonファイルに記述をし
全てのファイル、vscode自体もリロードしました。

イメージ説明

上記の設定で他の方はうまくemmetを使用できるようになっているようなのですが、
私のvscodeではうまくいきませんでした。

vscodeの拡張機能"erb"も入れ直しました。

json

1{ 2 "editor.fontSize": 15, 3 "editor.renderWhitespace": "all", 4 "emmet.triggerExpansionOnTab": true, 5 "editor.minimap.showSlider": "always", 6 "editor.minimap.renderCharacters": false, 7 "editor.hover.enabled": false, 8 "window.title": "${dirty}\${activeEditorMedium}${separator}${rootName}", 9 "editor.minimap.side": "left", 10 "workbench.tree.indent": 25, 11 "workbench.tree.renderIndentGuides": "always", 12 "editor.insertSpaces": false, 13 "editor.bracketPairColorization.enabled": true, 14 "workbench.iconTheme": "vscode-icons", 15 "workbench.colorTheme": "Solarized Dark", 16 "editor.formatOnSave": true, 17 "explorer.confirmDragAndDrop": false, 18 "explorer.confirmDelete": false, 19 "liveServer.settings.donotShowInfoMsg": true, 20 "editor.suggestSelection": "first", 21 "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", 22 "ruby.intellisense": "rubyLocate", 23 "ruby.useLanguageServer": true, 24 "ruby.rubocop.useBundler": true, 25 "ruby.format": "rubocop", 26 "ruby.lint": { 27 "rubocop": { 28 "useBundler": false 29 } 30 }, 31 "workbench.settings.useSplitJSON": true, 32 "files.associations": { 33 "*.erb": "erb" 34 }, 35 "emmet.includeLanguages": { 36 "erb": "html" 37 }, 38 "workbench.editor.enablePreview": false, 39 "workbench.editor.enablePreviewFromQuickOpen": false, 40 "solargraph.commandPath": "solargraphのPATH", 41 "ruby.intellisense": "rubyLocate", 42 "window.zoomLevel": 1, 43 "html-css-class-completion.enableEmmetSupport": true, 44 "tailwindCSS.emmetCompletions": true 45}

参考にした記事は以下のものです
VSCodeで、erbでもhtml拡張機能を使いたい

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2022/01/05 22:43

画像ではテキストコピーできないので配慮願います。 コードは基本テキストでコピーペーストでの提示です。
m.ts10806

2022/01/05 22:45

あと、参考にした記事URLも提示してください。その記事が絶対にあっているという保証はないです。特に個人記事は「俺がうまく行ったやり方」だけが書かれていて、試行錯誤の内容まで言及されてない、省略されていることも多いです。
退会済みユーザー

退会済みユーザー

2022/01/05 22:50

改善の指摘をありがとうございます。 コードと参考にした記事の追加を行いましたので確認していただけると幸いです
m.ts10806

2022/01/05 22:55

半端な状態で提示されてませんか? 画像のものよりも少ないですし・・
退会済みユーザー

退会済みユーザー

2022/01/05 23:04

必要な部分と思われるところのみ切り取ってしまいました。申し訳ありません。 再度、setting.jsonファイルに記述したコードを全て更新しましたのでよろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問