摘要:宋体以像素为单位控制字号。将其设置为可隐藏窗格。是否已启用自动刷新是否启用自动拉取以像素为单位控制终端的字号,这是的默认值。要求工作区使用高于版本的。
用户设置
打开 文件 > 首选项 > 用户设置(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:WindowsSystem32WindowsPowerShellv1.0powershell.exe"
}
用户代码片段
打开 文件 > 首选项 > 用户代码片段 > (搜索代码语言)
HTML片段
</>复制代码
{
"ss": {
"prefix": "ss",
"body": [
""
],
"description": ""
},
"html5": {
"prefix": "html5",
"body": [
"",
"",
"",
"",
" ",
" ",
" ",
" <span class="hljs-string"><span class="hljs-variable">${1:Document}</span></span> ",
"",
"",
"",
" $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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/81856.html
摘要:前端编程工具有很多,例如简称,,,,等等,今天给大家推荐的是是一个完全免费的软件,页面简介大方,是前端开发者最受欢迎的软件之一。 前端编程工具有很多,例如Visua...
摘要:软件跨平台支持以及,运行流畅,可谓是微软的良心之作微软有这个宇宙最强,自然也不会弱宇宙最强编辑器说到代码编辑器,我们有必要提一提还有。 原文链接:VS Code上手与超实用插件安利 工欲善其事必先利其器 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号...
摘要:由于本身不能个性化配置,有时可能会引起不适,但是至少保证团队成员可以轻易统一代码风格。就是将多于一个字母的合成一个字形。自从年双十一正式上线,累计处理了亿错误事件,得到了金山软件等众多知名用户的认可。 译者按: IDE是生产力的保证! 原文:Visual Studio Code Settings and Extensions for Faster JavaScript Develop...
摘要:如果想配置开发工具面向前端及开发人员的配置如果想配置开发工具配置及使用技巧所谓网红编辑器,我觉得比来的更爽,因为的所有操作和插件,对于来说也就是一个插件就能无缝兼容。作为一个前端开发,开箱即用的代码编辑高亮提示都十分友好。 如果想配置 sublime 开发工具 => 面向web前端及node开发人员的vim配置 如果想配置 vim 开发工具 => sublime配置及使用技巧 所谓网红...
摘要:前端配置简体中文插件,一般会自动识别你的环境,自动提示是否需要简体中文的语言包。使用插件将目前配置保存到上,以后只需要从上获取,就可以一次性安装插件配置信息。 VS code-前端配置 showImg(https://segmentfault.com/img/bVbuK6l?w=1224&h=999); Chinese (Simplified) Language Pack for Vi...
阅读 2460·2021-11-23 09:51
阅读 5932·2021-09-22 15:39
阅读 3477·2021-09-02 15:15
阅读 3636·2019-08-30 15:54
阅读 2476·2019-08-30 15:53
阅读 1525·2019-08-30 14:04
阅读 2583·2019-08-29 18:33
阅读 2545·2019-08-29 13:08
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要