VSCode で vue を設定し、Vetur 言語認識エンジンを使用する方法!

VSCode で vue を構成するにはどうすればよいですか? vue の構文を特定しますか?次の記事では、言語認識エンジンとして Vetur を使用する方法を紹介します。vuers に最適な VSCode を作成しましょう。

公式 Web サイトから vscode をダウンロードすると、インストールが開き、中国語の言語パックをインストールするように求められます。プロンプトに従ってインストールして再起動すると、インターフェイスが次のようになります。中国語のインターフェース。 [推奨学習: "vscode チュートリアル "]

はインターフェイス テーマとして Materia テーマ を使用します。インターフェイスのスタイルは非常にきれいで、色は目に優しいです。コードを書くときがとても気持ちがいいです。すっきり~

のアイコン表示はマテリアルアイコンテーマを使用しており、ファイルアイコンは非常に完成度が高く、マテリアテーマ##との相性も抜群です。

# because I vue テクノロジー スタックが使用されているため、vue 構文を識別する必要があります。構文認識を提供する言語認識エンジンとして

Vetur に従うことをお勧めします、書式設定、および関連するヒント。

構成の書式設定

vetur には独自の書式設定ツールが付属しており、

prettier 書式設定スキームを使用します。詳細については、構成を参照し、ctrl/command を使用してください。 設定を開く

JS フォーマット エンジンがデフォルトで

prettier

を使用していることがわかりますが、

eslintunification を使用することをお勧めします。一般的なプロジェクトの場合 ソース コード形式であるため、vuter を eslint

eslint および prettier 拡張機能をインストールします

eslint 拡張機能のヒントに従い、eslint を通常に使用するには、eslint

npm install -g eslint

に従ってグローバルにフォーマットする必要もあります。以下は私の vscode カスタム設定です

{
  "workbench.iconTheme": "eq-material-theme-icons",
  "workbench.colorTheme": "Material Theme",
  "materialTheme.fixIconsRunning": false,
  "editor.fontSize": 16, // 字体大小
  // 以下是代码格式化配置
  "editor.formatOnSave": true, // 每次保存的时候自动格式化
  "editor.tabSize": 2, // 代码缩进修改成2个空格
  "eslint.autoFixOnSave": false, // 每次保存的时候将代码按eslint格式进行修复
  "prettier.eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验
  "prettier.semi": false, // 去掉代码结尾的分号
  "prettier.singleQuote": true, // 使用带引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    }
  },
  "eslint.validate": [
    //开启对.vue文件中错误的检查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}

保存するたびにフォーマットし、労力を解放し、効果は次のとおりです。

よく使用されるプラグイン

• タグの名前を自動変更 タグ名を変更すると、閉じられたタグの名前が自動的に変更されます。 tag
• Bookmarks ブックマーク プラグイン、コードの重要なポイントを記録し、レビュー中に対応するポイントを簡単に取得できます
• Bracketペア カラーライザー Bracket色付け、複数の埋め込み用 括弧のセットは正確な識別に対応します
• 大文字と小文字の変更コード変数を宣言するときに、既存の変数をキャメル ケース、定数、またはその他のスタイルに切り替えることができます
• Codelf コードの名前付けのことになると、私は腹が立ちます。彼らのプログラミング時間の半分は、より適切で適切な名前を付ける方法を考えるのに費やされています。このアーティファクトでは、という難しい問題は解決できませんが、名前を付けることで、少なくとも解決策が提供されます。提案、より速く解決でき、物事を想像する必要がなくなります
• cssrem CSS 値を REM に変換するための VSCode プラグイン

html 今回デザインしたフォントは14pxを使用するため、転送する際は1rem = 14pxの対応関係となるため、ユーザー設定で設定する必要があります

// 第三方插件cssrem配置
  "cssrem.rootFontSize": 14

• Vue Peek 右クリックして参照コンポーネントを開くかプレビューします
• filesize ソース コードのファイル サイズを計算し、左下隅に表示します
• GitLens git 履歴の表示、送信レコードの表示、履歴の比較、バージョンのロールバック、アーティファクトが解析されていません
• インポート コスト import によって導入されたファイル サイズを計算します# HTML
クラスの CSS クラス名の
• ##IntelliSense は、ワークスペースで見つかった定義に基づくか、リンク要素によって参照される外部ファイルを介して HTML 属性の CSS クラス名の補完を提供します。
開発には vue 言語を使用するため、vue の CSS プロンプトを構成する必要もあります

"html-css-class-completion.includeGlobPattern": "**/*.{css,html,vue}"

• Live Server

  のサポートを提供します。 HTML のリアルタイム サービス プレビュー、コード変更の即時更新

• Path Intellisense

  Path はインテリジェント センシングを導入します

• ##npm -intellisense

  npm モジュールはインテリジェント センシングを導入します

• RegExp プレビューとエディタ

  正規表現のプレビューと編集

#設定の同期
• プラグイン、テーマ、すべてのユーザー データを含む vscode 設定を同期します

SVG ビューア
• SVG のプレビュー

Todo ツリー
• コード内で TODO リストを表示
  ##translate
Translate

• Tslint
ts コード形式検出ツール

• バージョン レンズ
npm バージョン検出

• vscode-fileheader
ドキュメント コメント ヘッダーの生成

• JavaScript (ES6) コード スニペット
es コード スニペット

• 相対パスのコピー
相対パスのコピー

• プログラミング関連の知識の詳細については、

  プログラミング ビデオ
をご覧ください。 ！

以上がVSCode で vue を設定し、Vetur 言語認識エンジンを使用する方法!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。