vscodeを使用してuniappを開発する方法

私はフロントエンドプロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小さなプログラムや h5 プロジェクトは uniapp を使用して開発されています。しばらく hbuiler を使用した後も、vscode は優れていると思います。以下は、vscode を使用して開発したいくつかの構成です。これらには、uniapp コンポーネント構文プロンプト、uniapp コードプロンプト、自動コードフォーマットが含まれます。

参考資料: https://ask.dcloud.net.cn/article/id-36286__page-2

1. veturをインストールする

まず、vscode拡張機能でインストールできるvscode基本vueプラグインveturをインストールする必要があります。

2. eslintをインストールする

vscodeにeslint拡張機能をインストールする

3. vscodeのsetting.jsonを設定する

VSCodeは設定を拡張します。ファイル > 設定 > 設定をクリックしてVSCode設定ファイルsettings.jsonを開き、次の設定を追加します。

{
   "files.autoSave": "オフ",
   "eslint.validate": [
       「ジャバスクリプト」、
       「javascriptreact」、
       「vue-html」、
       {
       「言語」: 「vue」、
       「自動修正」: 有効
       }
   ]、
   "eslint.run": "onSave",
   "エディター.タブサイズ": 2,
   "editor.codeActionsOnSave": {
       "source.fixAll.eslint": 真
   }
  }

Vue プロジェクトを自動的にフォーマットする場合も同様です。上記は設定の一部です。元の設定は削除しないでください。
知らせ

vscode のバージョンによって設定が若干異なる場合があります。設定に問題がある場合は、vscode からメッセージが表示されます。

4. vue-cli を使用して uniapp プロジェクトを作成します。

vue-cli がグローバルにインストールされていることを確認する必要があります。インストールされていない場合は、まず vue-cli をインストールしてください。
vue create -p dcloudio/uni-preset-vue my-project

ここに画像の説明を挿入

まずデフォルトのテンプレート（Typescript）を選択します。もちろん他のテンプレートを選択することもできます。

インストールが完了したら、vscode を使用して、作成したプロジェクトを開きます。

5. プロジェクトにコンポーネント構文ヒントをインストールする

npm i @dcloudio/uni-helper-jsonがpackage.jsonファイルにすでにインストールされている場合は、インストールする必要はありません。この時点で、コンポーネントの構文プロンプトが表示されます。

ここに画像の説明を挿入

6. vscodeにuniapp-snippetプラグインをインストールする

7. コードを保存して自動的にフォーマットする

この時点ではページのフォーマットがかなり乱雑で見苦しいことがわかります。保存時に自動的にフォーマットされないため、プロジェクトにeslintを追加する必要があります。
vue add eslint
最後にprettierを選ぶ
インストールが完了すると、プロジェクトにさらにいくつかのファイルがあり、.eslintrc.js ファイルでルールを構成できることがわかります。

ここに画像の説明を挿入

いくつかの設定されたjsファイルがエラーを報告していることがわかります。postcss.config.jsなどのこれらのファイルの先頭と末尾にpostcss.config.js eslintチェックは無視できます。

/* eslint を無効にする */
定数パス = require("パス");
モジュール.エクスポート = {
  パーサー: require("postcss-comment"),
  プラグイン: [
    必要("postcss-import")({
      解決(id、basedir、importOptions) {
        id.startsWith("~@/") の場合
          path.resolve(process.env.UNI_INPUT_DIR, id.substr(3)) を返します。
        } そうでなければ (id.startsWith("@/")) {
          path.resolve(process.env.UNI_INPUT_DIR, id.substr(2)) を返します。
        } そうでない場合 (id.startsWith("/") && !id.startsWith("//")) {
          path.resolve(process.env.UNI_INPUT_DIR, id.substr(1)) を返します。
        }
        ID を返します。
      },
    }）、
    require("自動プレフィックス")({
      削除: process.env.UNI_PLATFORM !== "h5",
    }）、
    必要("@dcloudio/vue-cli-plugin-uni/packages/postcss")、
  ]、
};
/* eslint を無効にする */

設定した他のjsファイルも同様に操作します。設定が完了したらコードを保存すると自動的にフォーマットされます。

8. HBuilderXが提供するコードブロックをインポートする

github から uni-app コードブロックをダウンロードし、プロジェクトディレクトリの下の .vscode ディレクトリに配置すると、HBuilderX と同じコードブロックが作成されます。 d コードブロックのダウンロードアドレスhttps://github.com/zhetengbiji/uniapp-snippets-vscode

これで、vscode を使用して uniapp を開発する方法に関するこの記事は終了です。より関連性の高い vscode 開発 uniapp コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: