1.安装 Prettier - Code formatter 、 beautify、插件
2.生成 .prettierrc 文件
3.配置 .prettierrc 文件
{
"printWidth": 100,
"singleQuote": true,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"htmlWhitespaceSensitivity": "ignore",
"useTabs": false,
"tabWidth": 2,
"endOfLine": "lf",
"trailingComma": "none",
"semi": true,
"eslintIntegration": true
}
4.在settion.json中这样配置
{
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.vue": "vue"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"editor.fontWeight": "500",
"editor.formatOnSave": true,
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"vsicons.dontShowNewVersionMessage": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"cssrem.rootFontSize": 100,
"bracketPairColorizer.activeScopeCSS": [
"borderStyle : solid",
"borderWidth : 5px",
"borderColor : {color}; opacity: 1"
],
"better-comments.tags": [
{
"tag": "!",
"color": "#FF2D00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "?",
"color": "#3498DB",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "//",
"color": "#474747",
"strikethrough": true,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "todo",
"color": "#FF8C00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "*",
"color": "#98C379",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
}
],
"editor.tabSize": 2,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.colorTheme": "Atom One Dark",
"workbench.iconTheme": "material-icon-theme",
"workbench.tree.indent": 16,
"prettier.singleQuote": true,
"prettier.semi": true,
"prettier.jsxSingleQuote": true,
"prettier.trailingComma": "none",
"prettier.printWidth": 300,
"prettier.jsxBracketSameLine": false,
"editor.fontFamily": "Operator Mono",
"editor.fontLigatures": false,
"liveServer.settings.donotShowInfoMsg": true,
"material-icon-theme.hidesExplorerArrows": true,
"terminal.integrated.fontFamily": "Operator Mono",//monospace
"terminal.integrated.fontSize": 15,
"terminal.integrated.lineHeight": 1.2,
"terminal.integrated.letterSpacing": 0.1,
"terminal.integrated.cursorBlinking": true,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"eslintIntegration": true,
},
"js-beautify-html": {
"wrap_attributes": "auto", //force-aligned"
"wrap_line_length": 100,
"end_with_newline": false
},
},
"eslint.run": "onSave",
//保存时eslint自动修复错误
"files.autoSave": "afterDelay",
"editor.fontSize": 15,
"editor.wordWrapColumn": 100,
"prettier.bracketSpacing": true,
"bracketPairColorizer.depreciation-notice": false,
"diffEditor.ignoreTrimWhitespace": false
// "editor.tokenColorCustomizations": {
// "textMateRules": [
// {
// "name": "italic font",
// "scope": [
// "comment",
// "keyword",
// "storage",
// "keyword.control.import",
// "keyword.control.default",
// "keyword.control.from",
// "keyword.operator.new",
// "keyword.control.export",
// "keyword.control.flow",
// "storage.type.class",
// "storage.type.function",
// "storage.type",
// "storage.type.class",
// "variable.language",
// "variable.language.super",
// "variable.language.this",
// "meta.class",
// "meta.var.expr",
// "constant.language.null",
// "support.type.primitive",
// "entity.name.method.js",
// "entity.other.attribute-name",
// "punctuation.definition.comment",
// "text.html.basic entity.other.attribute-name.html",
// "text.html.basic entity.other.attribute-name",
// "tag.decorator.js entity.name.tag.js",
// "tag.decorator.js punctuation.definition.tag.js",
// "source.js constant.other.object.key.js string.unquoted.label.js",
// ],
// "settings": {
// "fontStyle": "italic",
// }
// },
// ]
// },
}
4.下载Operator Mono 字体可查看