Vue は非常に人気のあるフロントエンド フレームワークで、シンプル、柔軟、効率的であり、ますます多くの開発者に愛されています。ただし、Vue の構文は複雑であるため、開発者は使用中に必然的に構文エラーを起こし、アプリケーションが適切に実行できなくなることがあります。このような事態を避けるために、この記事では Vue の構文エラー チェック手法を紹介します。
1. Vue-cli のインストール
まず、Vue-cli をインストールします. Vue-cli は、Vue の公式スキャフォールディング ツールです. これを使用することで、Vue アプリケーション開発を迅速に構築できます環境。インストール コマンドは次のとおりです:
npm install -g vue-cli
2. ESLint の使用
ESLint はオープン ソースの JavaScript 構文チェック ツールであり、これを使用すると役立ちます。コードエラー、文法エラー、スタイルの問題などを検出します。 ESLint を使用して Vue コードを検査するには、まず ESLint と Vue プラグインをインストールする必要があります。
npm i -D eslint
npm i -D eslint-plugin-vue
Vue プロジェクトのルート ディレクトリに、.eslintrc.js ファイルを作成します。ファイルを作成し、次のように設定します。コードをこのファイルにコピーします:
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential', '@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
// 这里可以添加自己额外的规则
}
}
構成上記の手順:
• root: true に設定すると、ファイルがルート構成ファイルであることを示し、ESLint は親ファイル内の構成の検索を停止します。
• env: コードが実行される環境を指定します。ここではノードに設定されており、Node.js 環境で実行されることを意味します。
• extends: 継承された ESLint ルール設定、ここでは 2 つのルール設定、plugin:vue/essential および @vue/standard が使用されます。
• parserOptions: パーサー オプションを指定します。babel-eslint は、Babel パーサーを使用するパーサー ラッパーです。ここでは、babel-eslint パーサーの解析が使用されます。
• ルール: 独自の ESLint ルールを追加できます。
コード エディターでエラーを自動的にチェックし、エラー プロンプトを表示するには、VS Code に ESLint 拡張機能をインストールする必要があります。
3. コードの検査
上記の手順を完了したら、コードのチェックを開始できます。 VS Code で Vue プロジェクトを開くと、ESLint 拡張機能がプロジェクト内のエラーを自動的に検出し、エラー プロンプトを表示します。
この時点で、VS Code で Vue コンポーネントを開くと、次の図に示すエラー メッセージが表示されます。
上の図に示すように、コード ウィンドウの左側に小さな赤い点が表示されます。その上にマウスを移動すると、エラー メッセージが表示されます。エラー メッセージに基づいてコードを修正できます。
さらに、特定の行のエラー チェックを無視したい場合は、対応する行の末尾にコメントを追加できます。コメントの内容は // eslint-disable-line:
...
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
