purpose

Unified team code style, prevent unnecessary conflicts in collaboration, the team’s main technology stack VUE.

Editor: vscode

Plugins: Vetur, Prettier, koroFileHeader(add file header comments and method comments)

Configuration file location

Vscode English menu: File/Preferences/Settings, click Open Settings in the upper right corner (JSON)

Vscode Chinese menu: File/Preferences/Settings, click on the upper right corner to open Settings (JSON)

Configuration files (Vetur, Prettier, koroFileHeader)

Install the plug-ins Vetur, Prettier, and koroFileHeader first

Then, add the following Settings to the configuration file. This is the simplest configuration, and the rest is the default.

Configuration instructions

Vetur is used for syntax highlighting

2. Prettier is used for formatting, JS, HTML, and CSS prettier

Third, personalized details

1) indent 4) Line wrap more than 160 characters 3) Remove semicolons 4) use single quotation marks in JS and CSSCopy the code

As follows:

// Automatically format "editor.formatOnSave": true, // Automatically format "fileheader.customMade": {"Author": "QiTianDaSheng", "Date": "Do not edit", "Descripttion": "", "LastEditors": "QiTianDaSheng", "LastEditTime": "Do not Edit"}, / / script used in prettier rules "vetur. Format. DefaultFormatter. Js" : "Prettier", / / template used in js - beautify - HTML rules "vetur. Format. DefaultFormatter. HTML" : "Prettier", / / style less module used in prettier rules "vetur. Format. DefaultFormatter. Less" : "Prettier", "vetur. Format. DefaultFormatterOptions" : {/ / js rules used in the "prettier" : {/ / 4 space indentation "tabWidth" : // "singleQuote": true, "printWidth": TabWidth ": 4, "prettier. Semi ": false, "prettier. SingleQuote ": true, "prettier.printWidth": 160,Copy the code

koroFileHeader

// fileheader. CustomMade ": {"Author": "QiTianDaSheng", "Date": "Do not edit", "Descripttion": {"Author": "QiTianDaSheng", "Date": "Do not edit", "Descripttion": "", "LastEditors": "QiTianDaSheng", "LastEditTime": "Do not Edit" }Copy the code
  1. Header comments are generated automatically.
  2. Function comments, using shortcut keyswindow:ctrl+alt+t.mac:ctrl+cmd+t, can generate.

Matters needing attention

  1. If you have more than one formatting plug-in, you can right-click and choose Vetur or Prettier as the default formatting mode.

  2. These personalization Settings in the project root overwrite the configuration of the editor.

    .vscode/settings.json

    .editorconfig

    .prettierrc (if the prettier plug-in is installed)

Zhejiang Dahua Technology Co., Ltd.- Soft research – Smart City Product R&D Department Recruiting senior front end, welcome to contact, interested can send resume to [email protected], long-term effective