格式化代码:
1、点击
搜索Vetur并安装,我这里已经安装了。
,
2、点击设置-->settings
再点击
在打开的页面输入已下内容并保存
{
"workbench.iconTheme": "vscode-icons",
// 选择vue文件的格式化工具
"[vue]": {
// 1.使用prettier,无法配置函数名后的空格
// "editor.defaultFormatter": "esbenp.prettier-vscode"
// 2.使用prettier-eslint
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// 自动修复
"editor.codeActionsOnSave": {
"source.organizeImports": true,
"source.fixAll": true,
"source.fixAll.eslint": false
},
"eslint.enable": true, //是否开启vscode的eslint
// 配置 ESLint 检查的文件类型
"eslint.validate": ["javascript", "vue", "html"],
"eslint.options": {
//指定vscode的eslint所处理的文件的后缀
"extensions": [".js", ".vue", ".ts", ".tsx"]
},
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用单引号替代双引号
"prettier.singleQuote": true,
"prettier.trailingComma": "none",
"prettier.bracketSpacing": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"git.enableSmartCommit": true,
"editor.quickSuggestions": {
"strings": true
},
//一定要在vutur.defaultFormatterOptions参数中设置,单独修改prettier扩展的设置是无法解决这个问题的,因为perttier默认忽略了vue文件(事实上从忽略列表移除vue也不能解决这个问题)
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, // 格式化不加分号
"singleQuote": true // 格式化以单引号为主
},
"js-beautify-html": {
// force-aligned | force-expand-multiline
"wrap_attributes": "force-aligned"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": true
}
},
// 关于@src目录路径提示的配置
// 安装vscode插件 `Path Intellisense`
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"files.autoSave": "onFocusChange",
"vsicons.dontShowNewVersionMessage": true,
"[javascript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"explorer.compactFolders": false
}
一、格式化:
1、设置代码格式化:
{
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.js": "vscode-typ=script",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.fontLigatures": null,
"editor.formatOnSave": true
}
2、设置自动换行:
File->Preferences->Settings->然后直接搜索 editor.wordWrap ->选择On即可;如下图所示:
3、在打开的页面填入已下代码并保存:
{
"workbench.iconTheme": "vscode-icons",
// 选择vue文件的格式化工具
"[vue]": {
// 1.使用prettier,无法配置函数名后的空格
// "editor.defaultFormatter": "esbenp.prettier-vscode"
// 2.使用prettier-eslint
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// 自动修复
"editor.codeActionsOnSave": {
"source.organizeImports": true,
"source.fixAll": true,
"source.fixAll.eslint": false
},
"eslint.enable": true, //是否开启vscode的eslint
// 配置 ESLint 检查的文件类型
"eslint.validate": ["javascript", "vue", "html"],
"eslint.options": {
//指定vscode的eslint所处理的文件的后缀
"extensions": [".js", ".vue", ".ts", ".tsx"]
},
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用单引号替代双引号
"prettier.singleQuote": true,
"prettier.trailingComma": "none",
"prettier.bracketSpacing": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"git.enableSmartCommit": true,
"editor.quickSuggestions": {
"strings": true
},
//一定要在vutur.defaultFormatterOptions参数中设置,单独修改prettier扩展的设置是无法解决这个问题的,因为perttier默认忽略了vue文件(事实上从忽略列表移除vue也不能解决这个问题)
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, // 格式化不加分号
"singleQuote": true // 格式化以单引号为主
},
"js-beautify-html": {
// force-aligned | force-expand-multiline
"wrap_attributes": "force-aligned"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": true
}
},
// 关于@src目录路径提示的配置
// 安装vscode插件 `Path Intellisense`
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"files.autoSave": "onFocusChange",
"vsicons.dontShowNewVersionMessage": true,
"[javascript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"explorer.compactFolders": false
}