Formatage automatique de la configuration du code VS, spécification de code unifiée

1. Introduction

Le travail d'équipe est un enjeu essentiel pour les entreprises de petite taille, et c'est aussi une pierre angulaire importante pour l'assurance de l'avancement du développement des projets. Ce n'est qu'en travaillant en équipe et en maximisant les compétences de chacun que nous pouvons assurer la productivité maximale de l'équipe. Au fur et à mesure que l'équipe s'agrandit, un style de code unifié devient de plus en plus important.Pour cela, VS Code est utilisé pour configurer le formatage automatique et les spécifications de code unifié.

2. Style de code

Style général
- javascriptsuivent généralement ESlintla norme
- html, wxmlsuivent généralement prettyhtmlles normes
javascriptréglage de détail
- pas de point-virgule à la fin
- Enveloppez plus de 140 caractères
- utiliser des guillemets simples
- pas de virgule à la fin
- Fonction flèche paramètre unique sans point-virgule
- Les espaces avant les parenthèses sont interdits dans les déclarations de fonctions

3. Préparez le plug-in

Plugin VS Code

VuterFournit vuedes extraits de code, une prise en charge de la syntaxe, la mise en surbrillance du code, etc.
ESlintVérifier javascriptles vérifications grammaticales et les spécifications du code
Prettier - Code formatterDivers formatages de code
minappComplétion intelligente des balises et des attributs de l'applet WeChat

4. Paramétrage personnalisé

1. Méthode de développement

ouvrir VS Codele fichier de configurationsetting.json
touches de raccourci ctrl + shirt + p, rechercheSettings(JSON)

2. Paramétrage personnalisé

{
  // 使用vscode-icons主题
  "workbench.iconTheme": "vscode-icons",
  // 每次保存的时候将代码按格式进行修复
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 默认使用prettier格式化支持的文件
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      // 结尾无分号
      "semi": false,
      // 超过140个字符换行
      "printWidth": 140,
      // 使用单引号
      "singleQuote": true,
      // 无尾随逗号
      "trailingComma": "none",
      // 箭头函数单个参数不加分号
      "arrowParens": "avoid"
    },
    "prettyhtml": {
      "printWidth": 140
    }
  },
  // 同上prettier格式化代码
  "prettier.semi": false,
  "prettier.printWidth": 140,
  "prettier.trailingComma": "none",
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid",
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  // 指定wxml的格式化
  "minapp-vscode.wxmlFormatter": "prettyHtml",
  "minapp-vscode.disableAutoConfig": true
}