下面是我的vscode的settings.json
{
"editor.wordWrap": "on", // 換行
"editor.fontSize": 18,
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
"editor.minimap.enabled": false, // 关闭缩略图
"files.autoSave": "onFocusChange",
"editor.tabCompletion": "on",
"editor.quickSuggestions": {
//开启自动显示建议
"other": true,
"comments": true,
"strings": true
},
"window.zoomLevel": 0,
"workbench.startupEditor": "welcomePage",
// "editor.renderWhitespace": "boundary", // 空白用圆点补足
"editor.cursorBlinking": "smooth",
"editor.minimap.renderCharacters": false,
"files.associations": {
"*.cjson": "jsonc",
"*.wxml": "html",
"*.wxss": "css",
"*.wxs": "javascript",
// "*.vue": "html"
},
"emmet.includeLanguages": {
"wxml": "html"
},
//在使用搜索功能时，将这些文件夹/文件排除在外
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/target": true,
"**/logs": true,
},
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
/************** ESlint *****************/
"eslint.format.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue",
".ts",
".tsx"
]
},
"eslint.nodePath": "",
"eslint.codeAction.showDocumentation": {
"enable": true
},
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"html",
"vue",
],
/************** Vetur *****************/
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
"prettier.printWidth": 120, // 超过最大值换行
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用单引号替代双引号
"prettier.singleQuote": true,
"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号
"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
"prettier.endOfLine": "auto", // 结尾是
auto
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
"prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.requirePragma": false, // 不需要写文件开头的 @prettier
"prettier.useEditorConfig": false,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue组件中html代码格式化样式
"wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
"wrap_line_length": 100,
"end_with_newline": false,
"semi": true,
"singleQuote": true
},
"prettier": {
"printWidth": 100,
"singleQuote": true, // 使用单引号
"semi": false, // 末尾使用分号
"arrowParens": "avoid",
"bracketSpacing": true,
"proseWrap": "preserve", // 代码超出是否要换行 preserve保留
"trailingComma": "none"
}
},
// vue格式器
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// javascript格式器
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// html格式器
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// json格式器
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
// typescript格式器
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"git.confirmSync": false,
}
配置了上述规则之后，vscode保存即格式化代码，但是就是有一个问题，函数与圆括号之间的空格会被自动去掉，导致脚手架配置的eslint会报错。
查看配置发现有控制函数名与后面括号之间的空格这个规则，但就是不起作用。
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
在线求助。
