一、背景

各开发人员在编辑器里安装的格式化插件和配置不统一，导致一些格式修改记录提交，影响对代码修改的复查效率。

二、解决方案

1. 安装vscode插件

1.1 vscode默认代码格式

`"editor.tabCompletion"``: ``"on"``,`

`"editor.tabSize"``: 4,`

`"editor.snippetSuggestions"``: ``"top"``,`

`"editor.renderWhitespace"``: ``"none"``, ``//显示空格和tab符`

`"editor.formatOnSave"``: ``true``, ``//#每次保存的时候自动格式化`

1.2 Prettier - Code formatter 插件配置

`// 默认所有语言格式化 Prettier`

`"editor.defaultFormatter"``: ``"esbenp.prettier-vscode"`

`// 指定js格式化使用 Prettier`

`"[javascript]"``: {`

`    ``"editor.defaultFormatter"``: ``"esbenp.prettier-vscode"`

`}`

`// 指定js格式化不使用 Prettier`

`"[javascript]"``: {`

`    ``"editor.defaultFormatter"``: ``null`

`}`

`// 其它配置项`

`"prettier.tabWidth"``: 4, ``// 每个制表符占用的空格数`

`"prettier.arrowParens"``: ``"avoid"``, ``// 当箭头函数仅有一个参数时加上括号`

`"prettier.bracketSpacing"``: ``false``, ``// 控制对象字面量的空格输出`

`"prettier.semi"``: ``false``, ``// 是否在每行末尾添加分号`

`"prettier.singleQuote"``: ``true``, ``// 如果为 true，将使用单引号而不是双引号`

`"prettier.useTabs"``: ``true``, ``// 使用制表符（tab）缩进`

`"prettier.printWidth"``: 160, ``// 指定每行代码的最佳长度， 如果超出长度则换行。`

`"prettier.htmlWhitespaceSensitivity"``: ``"ignore"``, ``// 指定HTML文件的全局空白区域敏感度。 有效选项： 'css' - 尊重CSS显示属性的默认值。`

1.3 vetur 插件配置

`// 安装 stylus:  For stylus.`

`// 安装 Sass: For the .sass section of the files.`

`"vetur.format.defaultFormatter.html"``: ``"prettier"``,`

`"vetur.format.defaultFormatter.pug"``: ``"prettier"``,`

`"vetur.format.defaultFormatter.css"``: ``"prettier"``,`

`"vetur.format.defaultFormatter.postcss"``: ``"prettier"``,`

`"vetur.format.defaultFormatter.scss"``: ``"prettier"``,`

`"vetur.format.defaultFormatter.less"``: ``"prettier"``,`

`"vetur.format.defaultFormatter.stylus"``: ``"stylus-supremacy"``,`

`"vetur.format.defaultFormatter.js"``: ``"prettier"``,`

`"vetur.format.defaultFormatter.ts"``: ``"prettier"``,`

`"vetur.format.defaultFormatter.sass"``: ``"sass-formatter"``,`

`"vetur.format.options.tabSize"``: 4,`

1.4 WXML - Language Service 插件安装，for原生微信小程序，默认配置即可。

1.5 koroFileHeader，生成文件时自动注释，添加函数注释

`"fileheader.configObj"``: {`

`    ``"autoAdd"``: ``true``,`

`    ``"autoAlready"``: ``true``,`

`    ``"prohibitAutoAdd"``: [``"json"``, ``"md"``],`

`    ``"createFileTime"``: ``true``,`

`    ``"dateFormat"``: ``"YYYY-MM-DD HH:mm:ss"``,`

`    ``"moveCursor"``: ``true`

`},`

`"fileheader.cursorMode"``: {`

`    ``"Description"``: ``""``,`

`    ``"param"``: ``""``,`

`    ``"return"``: ``""`

`},`

`"fileheader.customMade"``: {`

`    ``"Author"``: ``"duchengdong"``,`

`    ``"Date"``: ``"Do not edit"``,`

`    ``"LastEditors"``: ``"duchengdong"``,`

`    ``"LastEditTime"``: ``"Do not edit"``,`

`    ``"Description"``: ``""`

`}`

2. 其它插件工具，提高开发效率

1.  CSS Peek: 原生HTML快速查询css定义；
1.  htmltagwrap: 给任意代码块添加父tag包裹起来；
1.  Typescript React code snippets：react代码块快捷添加；
1.  vscode-icons: 设置文件图标主题；

三、vscode配置settings.json

可直接复用或者参考。

{

"workbench.startupEditor": "newUntitledFile",

"workbench.colorTheme": "Atom One Dark",

"extensions.ignoreRecommendations": true,

"explorer.confirmDelete": true,

*// 配置emmet是否启用tab展开缩写*

*// vscode已经内置emmet,这一设置最大作用是：当输入的文本不属于Emmet定义的缩写规则时，依然允许使用Tab键进行扩展。此时会提示自定义的缩写语句，以及各插件自定义的缩写语句.*

"emmet.triggerExpansionOnTab": true,

"emmet.showSuggestionsAsSnippets": true, *// 是否将自定义的代码片段作为提示建议显示。*

"emmet.includeLanguages": {

"javascript": "javascriptreact",

"wxml": "html",

"jsx-sublime-babel-tags": "javascriptreact", *// 在 react 的jsx中添加对emmet的支持*

},

"emmet.syntaxProfiles": {

"vue-html": "html",

"vue": "html",

"javascript": "javascriptreact",

},

"breadcrumbs.enabled": true,

"explorer.confirmDragAndDrop": false,

"terminal.integrated.rendererType": "dom",

"vsicons.dontShowNewVersionMessage": true,

"workbench.iconTheme": "vscode-icons",

"workbench.activityBar.visible": true,

"fileheader.configObj": { *//去除注释文件*

"autoAdd": false,

"autoAlready": true,

"prohibitAutoAdd": [

"json",

"md"

],

"createFileTime": true,

"dateFormat": "YYYY-MM-DD HH:mm:ss",

"moveCursor": true,

},

"fileheader.cursorMode": { *//此为头部注释*

"Description": "",

"param": "",

"return": ""

},

"fileheader.customMade": { *//此为函数注释*

"Author": "yangmiaomiao",

"Date": "Do not edit",

"LastEditors": "yangmiaomiao",

"LastEditTime": "Do not edit",

"Description": ""

},

"files.associations": {

"*.cjson": "jsonc",

"*.wxss": "css",

"*.wxs": "javascript",

"*.wxml": "wxml",

"*.js": "javascript",

"*.vue": "vue"

},

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

"vetur.format.defaultFormatter.pug": "prettier",

"vetur.format.defaultFormatter.css": "prettier",

"vetur.format.defaultFormatter.postcss": "prettier",

"vetur.format.defaultFormatter.scss": "prettier",

"vetur.format.defaultFormatter.less": "prettier",

"vetur.format.defaultFormatter.stylus": "stylus-supremacy",

"vetur.format.defaultFormatter.js": "prettier",

"vetur.format.defaultFormatter.ts": "prettier",

"vetur.format.defaultFormatter.sass": "sass-formatter",

"vetur.format.options.tabSize": 4,

"vetur.format.defaultFormatterOptions": {

"prettier": {

"semi": false,

"singleQuote": true

},

"js-beautify-html": {

"wrap_line_length": 60,

"wrap_attributes": "auto",

"end_with_newline": true

},

"prettyhtml": {

"printWidth": 120, *//一行的长度超过120，在换行*

"singleQuote": true,

"wrapAttributes": false,

"sortAttributes": false

}

},

"editor.tabSize": 4,

"editor.fontSize": 12,

"editor.renderWhitespace": "none", *//显示空格和tab符*

"editor.formatOnSave": true, *//#每次保存的时候自动格式化*

"editor.formatOnPaste": true, *// 粘贴后的内容, 是否自动格式化*

*//配置eslint*

"eslint.validate": [

"javascript",

"javascriptreact",

"html",

"vue",

],

"editor.codeActionsOnSave": {

"source.fixAll.eslint": true

},

"editor.folding": true,

"prettier.tabWidth": 4,

"prettier.arrowParens": "avoid",

"prettier.bracketSpacing": false,

"prettier.semi": false,

"prettier.singleQuote": true,

"prettier.useTabs": true,

*"prettier.printWidth": 160,*

"prettier.htmlWhitespaceSensitivity": "ignore",

"[html]": {

"editor.defaultFormatter": "vscode.html-language-features"

},

"[vue]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"[scss]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"[css]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"[less]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"[typescriptreact]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"[typescript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"[json]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"[javascript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"[jsonc]": {

"editor.defaultFormatter": "vscode.json-language-features"

},

"search.followSymlinks": false,

"javascript.updateImportsOnFileMove.enabled": "always",

"javascript.preferences.quoteStyle": "single",

"typescript.updateImportsOnFileMove.enabled": "always",

"typescript.preferences.quoteStyle": "single",

"window.zoomLevel": 2,

"typescript.suggest.paths": true,

"minapp-vscode.disableAutoConfig": true, *// 微信小程序是否自动配置*

"git.ignoreRebaseWarning": true,

"git.confirmSync": false,

"git.enableSmartCommit": true,

"path-intellisense.extensionOnImport": true,

"path-intellisense.absolutePathToWorkspace": true,

"search.exclude": {

*// VScode进行文件搜索时，不搜索这些区域。*

"**/node_modules": true,

"**/bower_components": true,

"**/*.code-search": true,

"**/.DS_Store": true,

"**/.git": true,

"**/.gitignore": true,

"**/.idea": true,

"**/.svn": true,

"**/.vscode": true,

"**/build": true,

"**/dist": true,

"**/tmp": true,

"**/yarn.lock": true,

"**/assets": true

},

}

四、创建.prettierrc文件

也可以在项目中创建.prettierrc文件

{
    "tabWidth": 4,
    "singleQuote": true,
    "semi": false,
    "trailingComma": "all",
    "printWidth": 160
}