vscode 格式化 vue 等文件的 配置 eslint vetur prettier Beautify
需求
自动格式化需求 多行回车 合并一行,去分号 最后一个逗号,自动删除,符合eslint
结果
虽然能用了,但是 百度好几个方案,也不知道哪个对哪个,太忙没时间弄了。
配置文件记录
eslint 得装
vetur 得装
prettier 得装
Beautify v1.5.0 得装 这个很重要
装了一个 cnpm install prettier-eslint --save-dev
"devDependencies": {
"prettier-eslint": "^13.0.0",
.jsbeautifyrc
unformatted 我家了个script 要不和eslint冲突
{
"brace_style": "none,preserve-inline",
"indent_size": 2,
"indent_char": " ",
"jslint_happy": false,
"unformatted": [
"script"
],
"css": {
"indent_size": 2
},
"wrap_attributes": "force-aligned",
"wrap_line_length": 120,
"semi": false,
"singleQuote": true,
"end_with_newline": false
}
.babelrc
{
"presets": [
"@vue/app"
]
}
.editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.eslintrc.js
module.exports = {
root: true,
'extends': [
'plugin:vue/essential',
'@vue/standard'
],
plugins: [
// 注意这里不能配置 html 选项,为什么?https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
'vue',
],
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'vue/no-parsing-error': [2, {
'x-invalid-end-tag': false
}],
'no-undef': 'off',
'camelcase': 'off',
'no-unused-vars': 'off' // 变量没使用 不报错
},
parserOptions: {
parser: 'babel-eslint'
}
}
.prettierrc
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"singleQuote": false,
"semi": true,
"trailingComma": "none",
"bracketSpacing": true,
"parser": "vue-eslint-parser"
}
settings.json
{
"pasteImage.path": "${currentFileNameWithoutExt}_Images/",
"update.mode": "manual",
"extensions.autoUpdate": false,
"extensions.autoCheckUpdates": false,
"editor.formatOnSave": true, // 这个保存时候进行格式化
"editor.codeActionsOnSave": {
// 保存时候 eslint修复
"source.fixAll.eslint": true
},
"eslint.alwaysShowStatus": true,
"editor.fontSize": 22,
"editor.fontFamily": "Consolas, 'Courier New', monospace",
"editor.fontLigatures": false,
"editor.fontWeight": "400",
"editor.lineHeight": 28,
"editor.letterSpacing": 0,
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.detectIndentation": true,
"editor.wordWrap": "off",
"editor.renderLineHighlight": "gutter",
"editor.roundedSelection": true,
"editor.renderControlCharacters": true,
"editor.renderIndentGuides": true,
"editor.dragAndDrop": false,
"editor.minimap.enabled": false,
"editor.minimap.showSlider": "mouseover",
"editor.minimap.renderCharacters": true,
"editor.minimap.maxColumn": 200,
"editor.quickSuggestions": {
"strings": true
},
"editor.suggestSelection": "first",
"window.titleBarStyle": "native",
"window.menuBarVisibility": "visible",
"window.title": "${rootName} - ${dirty}${activeEditorLong}",
"workbench.colorTheme": "Spacegray Eighties Dark",
"workbench.iconTheme": "material-icon-theme",
"workbench.startupEditor": "welcomePage",
"workbench.activityBar.visible": true,
"workbench.editor.enablePreview": true,
"workbench.editor.tabSizing": "fit",
"workbench.editor.wrapTabs": false,
"workbench.editor.decorations.colors": true,
"workbench.editor.decorations.badges": true,
"workbench.tree.renderIndentGuides": "none",
"workbench.colorCustomizations": {
// "statusBar.background": "#333333",
// "statusBar.foreground": "#adadad",
"terminal.background": "#000000",
"terminal.foreground": "#FFFFFF"
},
"breadcrumbs.enabled": true,
"breadcrumbs.symbolPath": "off",
"explorer.openEditors.visible": 0,
"explorer.compactFolders": false,
"files.encoding": "utf8",
"files.eol": "\r\n",
"files.hotExit": "onExit",
"files.autoSave": "off",
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
//javascript
// "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"js/ts.implicitProjectConfig.experimentalDecorators": true,
//git
"git.path": "D:\\Git\\bin\\git.exe",
"git.enableSmartCommit": false,
//terminal
//"terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\cmd.exe",
//"terminal.integrated.shell.windows": "D:\\Git\\git-bash.exe",
"terminal.explorerKind": "integrated",
//eslint
"eslint.format.enable": false,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"typescript",
"typescriptreact"
],
//bookmarks
// "bookmarks.saveBookmarksInProject": true,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数名和后面的括号之间加个空格
"javascript.format.insertSpaceAfterCommaDelimiter": true, // 逗号后面有空格
"javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true, // 运算符前后有空格
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true, // 大括号前面插空格
"javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": true, // 关键字后面加空格
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true, // 匿名函数后面加空格
"beautify.language": {
"js": {
"type": [
"javascript",
"json"
],
"filename": [
".jshintrc",
".jsbeautify"
]
},
"css": [
"css",
"scss"
],
"html": [
"htm",
"html",
"vue"//在这里加上vue
]
},
"vetur.format.enable": false, // 不允许它格式化代码
"vetur.validation.template": false, // 不允许它做代码检测
"vetur.validation.script": false,
"vetur.validation.style": false,
"vetur.format.options.tabSize": 2, // 每个缩进级别的空格数,由所有格式化程序继承
"vetur.format.scriptInitialIndent": false, // js部分是否有初始缩进
//vetur
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// - auto: 仅在超出行长度时才对属性进行换行
// - force: 对除第一个属性外的其他每个属性进行换行
// - force-aligned: 对除第一个属性外的其他每个属性进行换行,并保持对齐
// - force-expand-multiline: 对每个属性进行换行
// - aligned-multiple: 当超出折行长度时,将属性进行垂直对齐
"wrap_attributes": "force-aligned", // 属性折行对齐方式
"wrap_line_length": 120, // 设置一行多少字符换行
"semi": false, // 是否在每行末尾添加分号
"singleQuote": true, // 使用单引号
"end_with_newline": false
},
"prettier": {
//设置分号
"semi": false,
//双引号变成单引号
"singleQuote": true,
//禁止随时添加逗号,这个很重要。找了好久
"trailingComma": "none"
}
},
//liveServer
"liveServer.settings.donotVerifyTags": true,
//alias-skip
"alias-skip.mappings": {
"@": "/src",
"_c": "/src/components"
},
// "[vue]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode"
// },
"[markdown]": {
"editor.minimap.enabled": true,
"editor.wordWrap": "on",
"editor.quickSuggestions": false,
"editor.formatOnSave": false
},
"[jsonc]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[html]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"scf.python3.path": "",
"scf.python2.path": "",
"tabnine.experimentalAutoImports": true,
"javascript.format.enable": true, // 20211102bug 发现js格式化不起错用,这个是false 并且[javascript] 需要注释掉
"javascript.format.insertSpaceAfterConstructor": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
"javascript.format.insertSpaceAfterSemicolonInForStatements": true,
"javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
"javascript.format.placeOpenBraceOnNewLineForFunctions": false,
"liveServer.settings.donotShowInfoMsg": true,
"[typescriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"vue-helper.alias": {
"_c": "src/components/",
"@": "src/"
},
"commentTranslate.source": "Baidu",
"commentTranslate.targetLanguage": "zh-CN",
"easy-translator.dictionary": [
"YouDao",
"Bing",
"Google",
"Linguee"
],
"vue-helper.componentPrefix": {
"alias": "@",
"path": "src"
},
"vue-helper.componentPath": [
"./*",
"./components/*"
],
"php.validate.executablePath": "D:/phpstudy_pro/Extensions/php/php5.6.9nts/php.exe",
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"javascript.updateImportsOnFileMove.enabled": "always",
"[vue]": {
// "editor.defaultFormatter": "dbaeumer.vscode-eslint"
"editor.defaultFormatter": "HookyQR.beautify"
},
// "vetur.validation.template": false,
"git.confirmSync": false,
"intelephense.diagnostics.languageConstraints": false,
"files.exclude": {
"**/.git": false
},
"files.associations": {
"*.vue": "vue"
},
"prettier.semi": false //去掉代码结尾的分号
}
---------------------------------------------
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)