Un article présentant les techniques de vérification des erreurs de syntaxe Vue

Vue est un framework front-end très populaire. Il est simple, flexible et efficace, et est apprécié par de plus en plus de développeurs. Cependant, en raison de la complexité de la syntaxe de Vue, les développeurs feront inévitablement des erreurs de syntaxe lors de l'utilisation, ce qui entraînera un mauvais fonctionnement de l'application. Afin d'éviter que cette situation ne se produise, cet article présentera les techniques de vérification des erreurs de syntaxe Vue.

1. Installez Vue-cli

Tout d'abord, nous devons installer Vue-cli est un outil d'échafaudage officiel de Vue. En l'utilisant, nous pouvons rapidement créer un environnement de développement pour les applications Vue. La commande d'installation est la suivante :

npm install -g vue-cli

2. Utiliser ESLint

ESLint est un outil de vérification de la syntaxe JavaScript open source, qui peut nous aider à détecter les erreurs grammaticales, les problèmes de style, etc. dans le code. . Afin d'utiliser ESLint pour inspecter le code Vue, nous devons d'abord installer les plugins ESLint et Vue. T Installez ESLINT :

1. NPM I -D ESLINT

Installez le plug-in Vue :

2. NPM I -D ESLINT -Plugin -Vue

Créez le fichier .eslintrc.js : répertoire, créez le .eslintrc. js et copiez le code de configuration suivant dans le fichier :

module.exports = {
3. root: true,
env: {

node: true

},

extends: [

'plugin:vue/essential',
'@vue/standard'

] ,
parserOptions: {

parser: 'babel-eslint'

} ,
règles : {

// 这里可以添加自己额外的规则

}
}

Instructions de configuration comme ci-dessus :

• root : défini sur true pour indiquer que le fichier est le fichier de configuration racine et ESLint arrêtera de chercher dans la configuration du fichier parent.

• env : Spécifiez l'environnement dans lequel le code s'exécute. Ici, il est défini sur node, ce qui signifie qu'il s'exécute dans l'environnement Node.js.

• extends : configuration de règle ESLint héritée, deux configurations de règles, plugin:vue/essential et @vue/standard sont utilisées ici.

• parserOptions : Spécifiez les options de l'analyseur babel-eslint est un wrapper d'analyseur qui utilise l'analyseur Babel-eslint.

• règles : vous pouvez ajouter vos propres règles ESLint.

Installer l'extension VS Code

Afin de vérifier automatiquement les erreurs dans l'éditeur de code et d'afficher des invites d'erreur, vous devez installer l'extension ESLint dans VS Code.

3. Vérification du code
4. Après avoir terminé les étapes ci-dessus, nous pouvons commencer à vérifier le code. Ouvrez le projet Vue dans VS Code et l'extension ESLint détectera automatiquement les erreurs dans le projet et affichera des invites d'erreur.

À ce stade, tant que vous ouvrez un composant Vue dans VS Code, vous pouvez voir le message d'erreur affiché dans l'image ci-dessous.

Comme le montre l'image ci-dessus, un petit point rouge apparaîtra sur le côté gauche de la fenêtre de code. Passer la souris dessus affichera un message d'erreur. Nous pouvons apporter des corrections de code en fonction du message d'erreur.

De plus, si l'on veut ignorer la vérification d'erreur de certaines lignes, on peut ajouter un commentaire à la fin de la ligne correspondante. Le contenu du commentaire est // eslint-disable-line :