vscode code formatting

If you want to quickly configure your own vscode support to save automatic formatting function

1. Install the following vscode extensions:

ESLint

Prettier - Code formatter

winter

As shown:
image description

Second, open the settings file

Opening method:

First follow the steps to open the setting interface,

Code-> preferences-> setting (you can also open shortcut keys command +, (mac) directly)

Now you see the interface configuration mode, click the three dots in the upper right corner (as shown below), and choose to open the settings.json file

image description

Third, add the following configuration to the setting.json file

Note: This configuration supports the formatting of files such as CSS, HTML, JS, and Vue. You can refer to it and configure it according to your needs.
If there is no special demand, it can also be used directly.

{

  // tab 大小为2个空格

  "editor.tabSize": 2,

  // 100 列后换行

  "editor.wordWrapColumn": 100,

  // 保存时格式化

  "editor.formatOnSave": true,

  // 开启 vscode 文件路径导航

  "breadcrumbs.enabled": true,

  // prettier 设置语句末尾不加分号

  "prettier.semi": false,

  // prettier 设置强制单引号

  "prettier.singleQuote": true,

  // 选择 vue 文件中 template 的格式化工具

  "vetur.format.defaultFormatter.html": "prettyhtml",

  // 显示 markdown 中英文切换时产生的特殊字符

  "editor.renderControlCharacters": true,

  // 设置 eslint 保存时自动修复

  "eslint.autoFixOnSave": true,

  // eslint 检测文件类型

  "eslint.validate": [

    "javascript",

    "javascriptreact",

    {

      "language": "html",

      "autoFix": true

    },

    {

      "language": "vue"

      "autoFix": true

    }

  ],

  // vetur 的自定义设置

  "vetur.format.defaultFormatterOptions": {

    "prettier": {

      "singleQuote": true,

      "semi": false

    }

  }

}

Save the configuration and save the formatting code

H-L

Published 8 original articles · Likes5 · Visits 40,000+

Private letter concerns