MVT开发文档

主题

Prettier 代码格式化工具 ​

它能够帮助开发者统一代码风格，提高代码的可读性。

支持语言 ​

JS/TS/HTML/CSS/VUE/Angular/React/Markdown/JSON/YAML

安装 ​

bash
npm install --save-dev --save-exact prettier

VSCode 插件 ​

安装Prettier - Code formatter插件

配置 ​

配置格式规则 ​

在项目根目录下创建.prettierrc文件，并添加配置内容

json
{
  "$schema": "https://json.schemastore.org/prettierrc",
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "bracketSameLine": true,
  "vueIndentScriptAndStyle": true,
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "tabWidth": 4
      }
    },
    {
      "files": "*.md",
      "options": {}
    },
    {
      "files": "*.vue",
      "options": {
        "parser": "vue",
        "htmlWhitespaceSensitivity": "css"
      }
    },
    {
      "files": "*.ts",
      "options": {
        "parser": "typescript"
      }
    },
    {
      "files": "*.js",
      "options": {
        "parser": "babel"
      }
    }
  ]
}

配置忽略格式规则 ​

在项目根目录下创建.prettierignore文件，并添加配置内容

bash
node_modules    # node_modules目录不进行格式化
dist            # dist目录不进行格式化
...

配置 VSCode 自动格式化 ​

在settings.json中添加配置

json
{
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Cli 执行 ​

命令行内执行

bash
npx prettier -c[-l,-w] "src/**/*.{vue,ts,js}"
npx prettier -w  "src/**/*.{vue,ts,js}"
npx prettier -w "src\views\users\profile.vue"