settings.json
{
"files.autoSave": "afterDelay",
"eslint.packageManager": "yarn",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
],
"editor.renderWhitespace": "none",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"gitlens.advanced.messages": {
"suppressGitVersionWarning": true
},
"editor.renderIndentGuides": false,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": true, // 要分号
"singleQuote": true // 要单引号
}
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[less]": {
"editor.defaultFormatter": "michelemelluso.code-beautifier"
},
"editor.detectIndentation": false,
"editor.tabSize": 2,
"javascript.updateImportsOnFileMove.enabled": "always",
"files.eol": "\n",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"terminal.integrated.shell.windows": "C:\\windows\\System32\\cmd.exe",
"window.zoomLevel": 1,
"gitlens.advanced.fileHistoryFollowsRenames": false,
"git.enableSmartCommit": true,
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"liveServer.settings.donotShowInfoMsg": true,
"[dockerfile]": {
"editor.quickSuggestions": {
"strings": true
}
},
"settingsSync.ignoredExtensions": [],
"files.exclude": {
// "**/node_modules": true // true 时会隐藏node_modules文件
},
"explorer.confirmDelete": false,
"svgviewer.enableautopreview": false, // true：允许预览 svg ;false:不允许预览 svg
"vsicons.dontShowNewVersionMessage": true,
"workbench.startupEditor": "welcomePage",
"gitlens.advanced.blame.customArguments": [],
// less 设置
"less.compile": {
"compress": false, // 是否压缩
"sourceMap": false, // 是否生成map文件，有了这个可以在调试台看到less行数
"out": false, // 是否输出css文件，false为不输出
},
"workbench.colorTheme": "One Dark Pro",
}
常用的 VScode 插件
- Auto Close Tag
- Auto Import
- Auto Rename Tag
- Beautify css/sass...
- browser-tab
- Chinese
- Easy LESS
- ESLint
- GitLens git 工具
- Guides
- HTML CSS Support
- HTML Snippets
- indent-rainbow
- JavaScript (ES6) code snippets
- Live Server
- One Dark Pro
- open in browser
- Path Intellisense
- Rainbow Brackets
- Smarty
- SVG Viewer
- Vetur
- vscode-icons
- Browser Preview
- Simple React Snippets
用户代码片段设置
文件 → 首选项 → 用户片段 → 可新增也可编辑
eg：自定义 vue 片段
{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"vue": {
"prefix": "vue",
"body": [
"<template>",
" <div>",
"",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" name: '',",
" components: {},",
" data() {",
" return {};",
" },",
"};",
"</script>",
"",
"<style lang='less' scoped>",
"</style>",
"",
],
"description": "generate a vue file"
}
}
代码自动换行到可视区内
文件=>首选项=>设置：
Editor:World Wrap 将off修改为on即可
