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

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

青灯夜游

リリース： 2021-10-14 18:46:00

転載

4944 人が閲覧しました

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

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

公式 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
##IntelliSense は、ワークスペースで見つかった定義に基づくか、リンク要素によって参照される外部ファイルを介して HTML 属性の CSS クラス名の補完を提供します。

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

ログイン後にコピー

Live Server
のサポートを提供します。 HTML のリアルタイムサービスプレビュー、コード変更の即時更新
Path Intellisense
Path はインテリジェントセンシングを導入します
##npm -intellisense
npm モジュールはインテリジェントセンシングを導入します
RegExp プレビューとエディタ
正規表現のプレビューと編集
プラグイン、テーマ、すべてのユーザーデータを含む vscode 設定を同期します
SVG のプレビュー
コード内で TODO リストを表示
##translate
Tslint
バージョンレンズ
vscode-fileheader
JavaScript (ES6) コードスニペット
相対パスのコピー
プログラミング関連の知識の詳細については、
プログラミングビデオ

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