Une brève analyse de la façon d'utiliser eslint et plus joli dans vscode

Comment utiliser eslint et plus joli en vscode ? L'article suivant vous présentera l'utilisation d'eslint dans vscode et l'utilisation combinée d'eslint et de plus joli. J'espère qu'il vous sera utile !

1. L'utilisation d'eslint dans vscode

1) Installez d'abord eslint dans vscode, puis ajoutez le code suivant dans les paramètres de vscode.json

"editor.formatOnSave": true, // 保存是格式化
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true // 按照eslint规则格式化
},
"eslint.format.enable": true, // 启用ESLint作为已验证文件的格式化程序

2) eslint doit être installé dans le projet (ou installé globalement )

Voici la configuration requise pour le plug-in eslint dans vscode : [Apprentissage recommandé : "Tutoriel d'introduction à vscode"]

3) Ajoutez le fichier .eslintrc.js dans le répertoire racine et ajoutez ce qui suit code

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["eslint:recommended"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {}
};

4) À l'intérieur des règles Le réglage de

quotes: [
   'error',
   'single'
],

semi: ['error', 'never']

• Le premier élément du tableau de valeurs d'attribut est défini

• Le deuxième élément du tableau de valeurs d'attribut est défini

eslint.bootcss .com/docs/rules/ Recherchez l'attribut correspondant et cliquez sur Entrée et recherchez les options

• eslint:recommended Les règles par défaut sont marquées

Remarque : À ce stade, le projet sera invité en fonction. aux paramètres par défaut et aux règles dans les règles, et il sera également demandé selon eslint lors de l'enregistrement. Les règles peuvent être formatées.

2. Utilisez eslint en combinaison avec plus joli

(Remarque : la combinaison d'eslint et plus joli dépend de la situation, et il n'est pas nécessaire de l'utiliser avec plus joli)

1) Installez d'abord le plug-in plus joli dans vscode , puis allez dans les paramètres dans vscode Ajoutez le code suivant à .json

"editor.defaultFormatter": "esbenp.prettier-vscode",

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  }

2) Installez plus joli dans le projet

Vous devez également installer eslint-plugin-prettier, < code>eslint-config-prettier, le but de ces deux plug-ins est de permettre à eslint d'afficher des invites selon les règles de plus joli (notez le numéro de version de ces deux plug-ins, le dernier eslint-plugin- la version 4.0 la plus jolie a des problèmes lors de son utilisation) eslint-plugin-prettier、eslint-config-prettier，这两个插件的目的就是为了使eslint可以按照prettier的规则进行提示（注意这两个插件的版本号问题，最新的 eslint-plugin-prettier 的4.0版本使用时有问题）

"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.3.1"

然后在 .eslintrc.js里面的extends加上 plugin:prettier/recommended

extends: ["eslint:recommended", "plugin:prettier/recommended"]

实际上做了下面的事情

然后就可以在根目录下添加.prettierrc.js

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
}

Ensuite, dans The extends in .eslintrc.js plus plugin:prettier/recommended

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
};

faites réellement les choses suivantes

Ensuite, vous pouvez ajouter le . prettierrc.js dans le répertoire racine, eslint vous demandera selon les règles à l'intérieur, et sera également formaté selon les règles lors de l'enregistrement

rules: {
//…
  'prettier/prettier': 'error'
}

3 Utilisez des règles plus jolies dans le projet vue

1) Tout d'abord. sélectionnez le paramètre eslint + plus joli lors de la création

2) Créez .prettierrc.js dans le répertoire racine et ajoutez des règles

rrreee

Par défaut, lorsque le format dans le code est incorrect, il avertira un avertissement

si nécessaire Pour le transformer en erreur, vous devez ajouter le code suivant à .eslintrc.jsrrreeeL'effet est le suivant

🎜Remarque :🎜 Après avoir modifié certaines configurations, vscode peut ne pas entre en vigueur immédiatement et peut être fermé à ce moment-là. Projet, rouvrez-le et essayez 🎜🎜Pour plus de connaissances sur VSCode, veuillez visiter : 🎜tutoriel vscode🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!