vscode 格式化实操手册

165

vscode 格式化的哲学

vscode 格式化的哲学

配置文件

{
    "printWidth": 100,
    "useTabs": false,
    "tabWidth": 2,
    "singleQuote": true,
    "semi": false,
    "trailingComma": "none"
}

步骤零

在 .gitignore 文件中，删去 .vscode

步骤一 vscode 配置

.vscode 文件夹下新建 extensions.json 文件，写入如下内容（如果文件已存在，新增配置项即可） 

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "streetsidesoftware.code-spell-checker"
  ]
}

streetsidesoftware.code-spell-checker 是一个检查拼写的工具，和本次主题没啥关系，但是程序员太容易拼错单词了，并且这是一个安装即用，无需配置的插件，建议没有拼接检查插件的同学还是安装一下
 .vscode 文件夹下新建 setting.json 文件，写入如下内容（如果文件已存在，新增配置项即可） 

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
}

步骤二 安装插件

打开 vscode 插件栏
 点击右上角的筛选漏斗
 选择推荐
 安装所有推荐的插件

步骤三 新建prettier 配置文件

在根目录新建 .prettierrc 文件，并填入配置内容（如果有，删去之前的配置，以此配置为准） 

{
    "printWidth": 100,
    "useTabs": false,
    "tabWidth": 2,
    "singleQuote": true,
    "semi": false,
    "trailingComma": "none"
}

在根目录新建 .prettierignore 文件，并填入配置内容（根据项目需求来） 

dist

至此，saveCode 使用统一的规范已经实现了

选读

格式化所有文件

npx  prettier --write  ./**/**/*.*

如果看到类似如下报错，只需要对这类文件配置对应解析器即可。例如下列报错是缺少 wxml 的解析方式，参见对微信小程序 wxml 文件处理
 [error] No parser could be inferred for file: components/maskComponent/maskComponent.wxml

避免 eslint 和 prettier 的冲突

安装

yarn add -D eslint-config-prettier
yarn add -D eslint-plugin-prettier

使用

  1. 在配置文件 eslintrc.js 文件中，新增 extends（注意plugin:prettier/recommended放在数组最后一位） 
module.exports = {
  ...
  extends: ['plugin:prettier/recommended'],
    ...
}
  1. 删去配置文件中，rules 中和代码格式有关的规则，比如缩进、句尾分号等

整合到 git 流程中

安装

yarn add -D --exact prettier

完成 prettier 的安装好，安装另外需要的包 

npx mrm@2 lint-staged

mrm 是一个自动化工具。它将根据 package.json 依赖项中的代码质量工具来安装和配置 husky 和 lint-staged

PS: 如果遇到报错only eslint, stylelint, prettier or custom rules are supported. 请查看 package.json的 devDependencies 是否同时包含了 prettier 和 eslint。

检查配置

运行完上面的命令后，只需要观察并修改 package.json 里的 lint-staged 即可 

"lint-staged": {
  "*.{js,ts,css,vue,json,md}": [
  "prettier --write",
  ]
}

对微信小程序 wxml 文件处理

推荐做法

发现旧做法（直接用 html 的格式化方式去处理 wxml）对 wxml 的格式化存在问题(主要是 wxs 部分的解析)，一番查找后，没有找到合适的 prettier 处理 wxml 的方案 ;于是对 wxml 采用其他的格式化引擎,需要安装另一个插件 wowbox
 新做法的 .vscode/settings.json 文件如下 

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[wxml]": {
    "editor.defaultFormatter": "wowbox.minapp-vscode-box"
  }
}

.prettierrc 文件如下 

{
  "printWidth": 100,
  "useTabs": false,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "es5"
}

旧做法 (wxs 部分的解析会出问题)

  1. 在 .vscode/settings.json 增加如下代码

配置 prettier.documentSelectors 用来让 prettier 找到 wxml 文件
 配置 wxml 文件的格式化方式 

{
  ...
   "[wxml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.documentSelectors": ["**/*.wxml"]
}
  1. 在 .prettierrc 文件中，重置 wxml 的解析器 
{
  ...
  "overrides": [
    {
      "files": "*.wxml",
      "options": {
        "parser": "html"
      }
    }
  ]
}
Comments
Write a Comment