VSCode设置及插件引荐

用户设置

翻开 文件 > 首选项 > 用户设置(U)，（疏忽掩盖事情区提醒）

{
// 一个制表符即是的空格数。该设置在 `editor.detectIndentation` 启用时依据文件内容举行重写。
"editor.tabSize": 2,
"editor.lineHeight": 24,
"editor.renderLineHighlight": "none",
"editor.renderWhitespace": "none",
// 掌握字体系列。
"editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace,'宋体'",
"editor.fontLigatures": true,
// 以像素为单元掌握字号。
"editor.fontSize": 14,
"editor.cursorBlinking": "smooth",
"editor.wordWrap": "on",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
// 掌握拔取局限是不是有圆角
"editor.roundedSelection": false,
// 发起小组件的字号
"editor.suggestFontSize": 16,
// 是不是许可自定义的snippet片断提醒,比方自定义的vue片断开启后就能够智能提醒
"editor.snippetSuggestions": "top",
"editor.quickSuggestions": {
"strings": true
},
// 实行笔墨相干的导航或操纵时将用作笔墨分隔符的字符
"editor.wordSeparators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",
// 在“翻开的编辑器”窗格中显现的编辑器数目。将其设置为 0 可隐蔽窗格。
"explorer.openEditors.visible": 0,
"git.path": "D:/Program Files/Git/bin/git.exe",
// 是不是已启用自动革新
"git.autorefresh": true,
// git是不是启用自动拉取
"git.autofetch": false,
// 以像素为单元掌握终端的字号，这是 editor.fontSize 的默许值。
"terminal.integrated.fontSize": 14,
// 掌握终端游标是不是闪灼。
"terminal.integrated.cursorBlinking": true,
"workbench.startupEditor": "newUntitledFile",
"workbench.iconTheme": "eq-material-theme-icons-palenight",
"workbench.colorTheme": "Material Theme Palenight High Contrast",
"materialTheme.fixIconsRunning": false,
"html.suggest.angular1": false,
"html.suggest.ionic": false,
"files.trimTrailingWhitespace": true,
// VScode 文件搜刮地区设置
"search.exclude": {
"**/dist": true,
"**/build": true,
"**/elehukouben": true,
"**/.git": true,
"**/.gitignore": true,
"**/.svn": true,
"**/.DS_Store": true,
"**/.idea": true,
"**/.vscode": false,
"**/yarn.lock": true,
"**/tmp": true
},
// 消除文件搜刮地区，比方node_modules(知心的默许设置已屏障了)
"files.exclude": {
"**/.idea": true,
"**/yarn.lock": true,
"**/tmp": true
},
// 设置文件关联，以便启用对应的智能提醒，比方wxss运用css
"files.associations": {
"*.vue": "vue",
"*.wxss": "css"
},
// 设置emmet是不是启用tab睁开缩写
"emmet.triggerExpansionOnTab": true,
// 设置emmet对文件范例的支撑，比方vue后缀文件根据html文件来举行emmet扩写
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html",
"Javascript": "Javascriptreact",
// xml范例文件默许都是单引号，开启对非单引号的emmet辨认
"xml": {
"attr_quotes": "single"
}
},
// 在react的jsx中添加对emmet的支撑
"emmet.includeLanguages": {
"jsx-sublime-babel-tags": "Javascriptreact"
},
// 是不是开启eslint检测
"eslint.enable": true,
// 文件保留时，是不是自动依据eslint举行花样化
"eslint.autoFixOnSave": true,
// eslint设置文件
"eslint.options": {
"plugins": [
"html",
"Javascript",
{
"language": "vue",
"autoFix": true
},
"vue"
]
},
// eslint能够辨认的文件后缀范例
"eslint.validate": [
"Javascript",
"Javascriptreact",
"html",
"vue",
{
"language": "html",
"autoFix": true
},
"typescript",
"typescriptreact"
],
// 快捷键计划,运用sublime的一套快捷键
"sublimeTextKeymap.promptV3Features": true,
// 花样化快捷键 shirt+alt+F
// prettier举行花样化时是不是装置eslint设置去实行，发起false
"prettier.eslintIntegration": true,
//分号
"prettier.semi": false,
// 假如为true，将运用单引号而不是双引号
"prettier.singleQuote": true,
"prettier.tabWidth": 2,
"prettier.useTabs": false,
// vetur插件花样化运用beautify内置划定规矩
"vetur.format.defaultFormatter.html": "js-beautify-html",
//函数前加空格
"Javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// 没有下边这个 上边不见效
"vetur.format.defaultFormatter.js": "vscode-typescript",
// 细节,设置gitlen中git提交历史纪录的信息显现状况
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressResultsExplorerNotice": false,
"suppressUpdateNotice": true,
"suppressWelcomeNotice": false
},
// 对不属于任何工程的 Javascript 文件启用或禁用 "experimentalDecorators" 设置。如有 jsconfig.json 或 tsconfig.json 文件，将掩盖此设置。请求事情区运用高于 2.3.1 版本的 TypeScript。
"Javascript.implicitProjectConfig.experimentalDecorators": true,
"powermode.enabled": true,
"powermode.presets": "flames",
// 开启apicloud在vscode中的wifi真机同步
"apicloud.port": "23450",
// 设置apicloud在vscode中的wifi真机同步根目录
"apicloud.subdirectories": "/apiclouduser",
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
}


用户代码片断

翻开 文件 > 首选项 > 用户代码片断 > （搜刮代码言语）

HTML片断

{
"ss": {
"prefix": "ss",
"body": [
""
],
"description": ""
},
"html5": {
"prefix": "html5",
"body": [
"",
"",
"",
"",
" ",
" ",
" ",
" ",
"",
"",
"",
" $2",
"",
"",
""
],
"description": "HTML5"
}
}

Javascript / Javascript React

{
"cl": {
"prefix": "cl",
"body": [
"console.log($1)"
],
"description": "console.log('')"
},
"dg": {
"prefix": "dg",
"body": [
"document.getElementById($1)"
],
"description": "document.getElementById(id)"
},
"jsdoc": {
"prefix": "__",
"body": [
"/**",
" * $1",
" */"
],
"description": "/** */"
}
}

快捷键设置

// 将键绑定放入此文件中以掩盖默许值
[
// ctrl+shift+d 复制当前行到下一行
{
"key": "ctrl+shift+d",
"command": "editor.action.copyLinesDownAction",
"when": "editorTextFocus && !editorReadonly"
},
// ctrl+shift+f 花样化代码
{
"key": "ctrl+shift+f",
"command": "editor.action.formatDocument",
"when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
},
// alt+/ 代码提醒
{
"key": "alt+/",
"command": "editor.action.triggerSuggest",
"when": "editorTextFocus"
},
// ctrl+shift+/ 多行解释
{
"key": "ctrl+shift+/",
"command": "editor.action.blockComment",
"when": "editorTextFocus"
}
]

插件引荐

提醒：VS Code自带有代码花样化功用，能够花样化HTML、CSS、Javascript、JSON文件，花样JSX文件时须要设置缩进体式格局为空格·

Auto Close Tag （自动封闭HTML标签）
Auto Rename Tag (HTML标签自动更名)
Babel ES6/ES7
VS Code Javascript (ES6) snippets (ES6语法提醒)
Beautify css/sass/scss/less
Brackets Light (主题)
Complete JSDoc Tags (js文档解释提醒)
Git History (检察git提交纪录)
HTML CSS Support (HTML中提醒可用的class)
npm Intellisense (提醒能够require的模块称号(最新版的vscode已集成此功用))
One Dark Theme (主题)
Path Intellisense (途径补全)
Prettier (花样化，运用规范作风，快捷键 alt+shift +F)
Reactjs code snippets (reactjs代码提醒)
Sass
SCSS IntelliSense
Sublime Babel
Sublime Text Keymap for VS Code (sublime键映照)
VSCode Great Icons (文件图标)
vscode-icons （文件图标）
HTMLHint （html代码搜检）
HTML Snippets (超等有用且低级的 H5代码片断以及提醒)
Document this (js 的解释模板 (注重：新版的vscode已原生支撑,在function上输入/** tab))
cssrem (将css中的px自动转换为rem.再也不必计算器了)
Vetur (添加对.vue后缀文件的疾速誊写支撑)
Vue 2 Snippets (疾速新建vue页面)

主题、文件图标引荐

• 主题我用的是：Atom One Dark Theme（theme-oceanicnext、Dracula）
• 文件图标我用的是：VSCode Great Icons