vscode で保存するときに vue ファイルを自動的にフォーマットするにはどうすればよいですか?次の記事では、vscode が eslint ルールに従って保存し、自動的にフォーマットする方法を紹介します。
最近、vue-admin-template を使用して vue を作成しました。npm run dev
実行時に常に eslint エラーが発生し、各チェックに時間がかかります。消費量と労力がかかるため、解決策を記録します。 [推奨学習: 「vscode 入門チュートリアル 」]
vscode は次のプラグインをインストールします:
次の内容を構成ファイルに追加します。すべてを直接コピーしないように注意してください。独自の構成が上書きされる可能性があります。コピーして重複キーを削除することをお勧めします。
{ "editor.suggestSelection": "first", "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", "explorer.confirmDelete": false, "editor.tabSize": 2, "files.autoSave": "onFocusChange", "editor.fontSize": 14, // 设置字体 "editor.tabCompletion": "on", // 用来在出现推荐值时,按下Tab键是否自动填入最佳推荐值 "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.organizeImports": true // 这个属性能够在保存时,自动调整 import 语句相关顺序,能够让你的 import 语句按照字母顺序进行排列 }, "editor.formatOnSave": true, // #让vue中的js按"prettier"格式进行格式化 "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js":"prettier-eslint", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // #vue组件中html代码格式化样式 "wrap_attributes": "auto", //也可以设置为“auto”,效果会不一样 "wrap_line_length": 200, "end_with_newline": false, "semi": false, "singleQuote": true }, "prettier": { "semi": false, "singleQuote": true, "editor.tabSize": 2 }, "prettyhtml": { "printWidth": 160, "singleQuote": false, "wrapAttributes": false, "sortAttributes": false } }, "[vue]": { "editor.defaultFormatter": "octref.vetur" }, "bracketPairColorizer.depreciation-notice": false, "editor.mouseWheelZoom": true }
ディレクトリ内のすべてのファイルをフォーマットしますプラグインをダウンロード
「フォーマット ファイルの開始」、ディレクトリを右クリックして「フォーマット ファイルの開始」 を選択します。
ファイル構成を無視する場合は、https://marketplace.visualstudio.com/items?itemName=jbockle.jbockle-format-files&ssr=false#overview
を参照してください。をご覧ください。 !VSCode の詳細については、
vscode チュートリアル
以上がvscode で保存するときに vue ファイルを自動的にフォーマットする方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。