vscode最佳配置
配置详解
editor
是针对 vscode 的风格设置
例如 tabSize
:一个tab等于2个空格,行高为24px
workbench
是针对 vscode 的主题设置
例如 iconTheme( 图标风格):使用插件 vscode-great-icons (需搜索安装)
search.exclude
配置vscode中项目中的哪些地方被排除搜索,避免你每次搜索结果中都有一大堆无关内容
files.associations
配置文件关联 :
任何 vue 后缀的文件会被认为是 html 文件 ,(查看编辑器右下角) 然后 vscode 会用 html 规则匹配 vue 文件做相应格式化,代码提示等。
任何 wxss 后缀的文件被认为是 css 文件 ,然后 vscode 会用 css 规则匹配 wxss 文件,对 css 的属性排序,rem 自动转换,格式化等
"files.associations": {
"*.vue": "html",
"*.wxss": "css"
}
收藏文章/复制粘贴最好。会持续更新
apicloud
是用于同步 vscode 开发apicloud程序时进行手机wifi真机同步使用,不用数据线即可进行PC修改代码,真机调试
。
vetur
和prettier
以及stylus
是用于vue
开发时的代码格式化, 代码提示.
filesize
在底部状态栏左侧,显示当前文件大小,没啥用
Live Server
快速启动本地服务器,注意只对.html和.htm文件有效。对html文件点击鼠标右键,选择open with Live Server
.
屏幕阅读器优化
, 可选项. 此功能是 vscode 专门配合盲人阅读器
而做的贴心选项,对于程序员来说也有一定作用( 哈哈哈, 可以纠正中式英文发音)
例如:当你开启后,鼠标悬浮在桌面任何位置,语音朗读器都会朗读出来所在位置的内容
。一旦在vscode中开启,那么底部会显示如图所示。具体设置在文尾。
vscode插件安装
Dracula Official
主题(我的最爱)Material Icon Theme
图标主题Chinese Language Pack
中文语言包GitLens
在代码文件显示每一行的提交历史Git History
对比查看git历史版本indent-rainbow
凸显缩进着色,让你的缩进一目了然Tabnine AI
- AI 代码完成插件 【全局】Code Runner
F5, 运行! 【全局】Image preview
图片预览 【全局】Color Highlight
颜色高亮 【全局】Regex Previewer
边写正则边看结果 【全局】Markdown Preview Enhanced
Markdown文件预览 【md文件】Markdown All in One
Markdown全功能snippet 【md文件】 koroFileHeader
生成文件头部备注 【md文件】XML Tools
XML文件格式化以及高亮 【xml文件】DotENV
env文件高亮 【xml文件】Bookmarks
对代码片段添加书签,便于跳转 【全局】Path Intellisense
路径识别,书写文件引入地址时很方便。遗憾: 对webpack项目中的路径别名无法识别 【全局】Prettier
格式化,全世界都在使用Prettier来统一风格【局部】**
水桶套装!直接安装全部插件,插件互不干扰。
vscode插件列表中, Ctrl + 鼠标左键 + 点击标题 会弹出对应官方介绍
前端
HTML CSS Support
在html/css文件中快速书写属性 【 Supported Languages】JavaScript (ES6) code snippets
快速书写ES6代码 【Supported languages】cssrem
将css中的px自动转换为rem.再也不用计算器(大漠推介) 【局部】Css Peek
在html和css文件中定位class和id样式. (右键单击选择器时,选择 Go to Definition和 Peek definition,遗憾的是vue中不可用)【html/css文件】npm Intellisense
在import语句中,自动填充npm模块。【js文件】Prettier
格式化,全世界都在使用Prettier来统一风格 【局部】Eslint
Js 语法检测 【全局】Tslint
Typescript 语法检测 【ts,js文件】JSON to TS
将json代码转变为Ts代码 【全局】Vetur
快速书写 Vue2 代码 【vue文件】Vue 2 Snippets
快速新建一个 Vue2 页面(参考文章) 【全局】Volar
快速书写 Vue3(对于Vue3不必安装前面2个插件) 代码 【vue文件】Sass
CSS预处理器,scss后缀文件的识别扩展 【vue文件】language-stylus
CSS预处理器,styl后缀文件的识别扩展 【styl文件】language-postcss
PostCSS预处理器**【styl文件】**
python
Python
tab与空格的痛苦,写过python的都知道 【py文件】
Flutter
Flutter
Flutter ! YYDS! 【dart文件】Awesome Flutter Snippets
Flutter 代码片段速写 【dart文件】Built Value Snippets
配合 Built Value
快速生成 dart 模型 【dart文件】
其他
Comment Translate
自动将英文翻译为中文 【全局】View In Browser
迅速通过浏览器打开html文件 【局部】filesize
在底部状态栏左侧,显示当前文件大小,还可以点击 【全局】Better Comments
对注释内容着色。快捷使用: 编辑器内输入 /**, 再按Tab键 【全局】REST Client
类似 postman ,直接在 VScode 中模拟发送http请求,调试可用 【全局】Live Server
快速启动一个本地服务器 【全局】
以下插件为:可选以及不推介安装。
以下插件 要么会导致VS体验变差,要么会导致快捷键冲突,如果没有相关需求,不再建议安装。
Sublime Text Keymap
启用sublimeText的快捷键配置 (sublimeText的老用户学着去适应Vscode的快捷键吧)Visual Studio IntelliCode
支持 AI for Python,Ts/Js /Java 语法。(此插件主要用于AI开发,因此支持Node,安装之后,在Js代码书写中会给出代码提示。不进行AI开发的人员,无需安装)Bracket Pair Colorizer2
每一对括号不同颜色 (太受欢迎,vscode已内置此功能)VS Code ES7 React/Redux/React-Native/JS snippets
快速书写React(非react项目,禁用) 【js文件】React Native Tools
支持React Native项目,快速书写 es6 及 jsx (非react项目,禁用)【js文件】C/C++
运行React Native项目时,查看某些文件的需要这个 【全局】
{
"editor.tabSize": 2,
"editor.lineHeight": 24,
"editor.renderLineHighlight": "none",
"editor.renderWhitespace": "none",
"editor.fontFamily": "Consolas",
"editor.fontSize": 15,
"editor.cursorBlinking": "smooth",
"editor.multiCursorModifier": "ctrlCmd",
"editor.wordWrap": "off",
"editor.wordWrapColumn": 400,
"editor.linkedEditing": true,
"editor.bracketPairColorization.enabled": true,
"explorer.confirmDelete": false,
"workbench.startupEditor": "newUntitledFile",
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Dracula Soft",
"workbench.colorCustomizations": {
"editorIndentGuide.activeBackground": "#ff0000"
},
"workbench.editor.limit.enabled": true,
"workbench.editor.limit.perEditorGroup": true,
"workbench.editor.limit.value": 8,
"editor.snippetSuggestions": "top",
"editor.suggestSelection": "recentlyUsedByPrefix",
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": false
},
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"terminal.external.windowsExec": "D:\\Asoftware\\cmder\\Cmder.exe",
"terminal.integrated.defaultProfile.windows": "Command Prompt",
"terminal.integrated.profiles.windows": {
"PowerShell": {
"source": "PowerShell",
"icon": "terminal-powershell"
},
"Command Prompt": {
"path": [
"${env:windir}\\Sysnative\\cmd.exe",
"${env:windir}\\System32\\cmd.exe"
],
"args": ["/k D:\\Asoftware\\cmder\\vendor\\init.bat"],
"icon": "terminal-cmd"
},
"Git Bash": {
"source": "Git Bash"
}
},
"javascript.updateImportsOnFileMove.enabled": "always",
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"breadcrumbs.enabled": true,
"open-in-browser.default": "chrome",
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/*.code-search": true,
"**/.DS_Store": true,
"**/.git": true,
"**/.gitignore": true,
"**/.idea": true,
"**/.svn": true,
"**/.vscode": true,
"**/build": true,
"**/dist": true,
"**/tmp": true,
"**/yarn.lock": true,
"**/assets": true,
"**/.history": true,
"vite.config.ts.timestamp-*": true,
"**/pnpm-lock.yaml": true
},
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/*.g.dart": true
},
"files.associations": {
"*.wxss": "css",
"*.cjson": "jsonc",
"*.wxs": "javascript",
"*.ts": "typescript",
"*.vue": "vue",
"*.dart": "dart",
"*.json": "jsonc",
".prettierrc": "jsonc"
},
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html",
"javascript": "javascriptreact",
"xml": {
"attr_quotes": "double"
}
},
"emmet.includeLanguages": {
"wxml": "html",
"vue-html": "html",
"javascript": "javascriptreact",
"jsx-sublime-babel-tags": "javascriptreact"
},
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImport": true,
"source.addMissingImports": true,
"source.fixAll": true
},
"eslint.options": {
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"typescript",
"typescriptreact",
"vue"
],
"typescript.validate.enable": false,
"git.autofetch": true,
"git.enableSmartCommit": true,
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false
},
"cssrem.rootFontSize": 100,
"commentTranslate.multiLineMerge": true,
"commentTranslate.hover.concise": true,
"versionlens.suggestions.showPrereleasesOnStartup": true,
"liveServer.settings.donotShowInfoMsg": true,
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
},
},
"security.workspace.trust.untrustedFiles": "open",
"debug.openDebug": "openOnDebugBreak",
"python.linting.enabled": false,
"minapp-vscode.disableAutoConfig": true,
"apicloud.port": "23450",
"apicloud.subdirectories": "/apicloudproject",
"dart.checkForSdkUpdates": false,
"dart.warnWhenEditingFilesOutsideWorkspace": true,
"dart.openDevTools": "flutter",
"dart.enableCompletionCommitCharacters": true,
"dart.lineLength": 120,
"dart.previewFlutterUiGuides": true,
"dart.debugSdkLibraries": true,
"dart.debugExternalPackageLibraries": true,
"[dart]": {
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.rulers": [120],
"editor.selectionHighlight": false,
"editor.suggest.snippetsPreventQuickSuggestions": true,
"editor.suggestSelection": "recentlyUsedByPrefix",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": false,
"files.insertFinalNewline": true
},
"java.jdt.ls.java.home": "C:/Program Files/JavaAdoptOpenJDK/jdk-11.0.8.10-hotspot",
"java.configuration.runtimes": [
{
"name": "JavaSE-1.8",
"path": "C:/Program Files/Java/jdk1.8.0_211"
},
{
"name": "JavaSE-11",
"path": "C:/Program Files/JavaAdoptOpenJDK/jdk-11.0.8.10-hotspot",
"default": true
}
]
}
常用快捷键
- 终端启动快捷键:
ctrl + shift + C
- 格式化快捷键:
shirt + alt + F
(使用 shirt + alt + F
进行格式化时,先执行编辑器设置中的格式化规则,然后执行本地项目 eslint 和 tslint 等插件规则) - 自动删除代码中无用的 import 引用,并排序:
shift + alt + o
- 自动修复代码:
alt+Q
(比如Vue3自动引入 ref 等对象。需要自定义:文件 – 首选项 – 键盘快捷方式 – 输入快速修复
)
其他功能
1. Screen Reader(屏幕阅读器)
支持windows7以上操作系统,不支持mac,作为练习英语听力的小玩具.
首先下载并安装软件,Nvda, 需要的pass: he2m
安装完成此软件后启动。在vscode中配置项editor.quickSuggestions
决定是否开启.
2. vue 项目,antfu 代码规范
vscode中使用eslint 和prettier进行格式化(可以无缝衔接setting.json配置)
3. react 项目配置
react项目(使用 npx create-react-app my-app 创建),有时会发现eslint检验规则不生效,此时在当前项目,需要额外安装2个插件。
npm install --save-dev eslint-plugin-html eslint-plugin-react
4. 插件快捷键冲突
插件安装过多时,不可避免会出现快捷键冲突。为了解决冲突,需要打开快捷键清单,根据插件名称搜索对应插件快捷键,比如我输入: emmet, 对准任意一条快捷键选项,点击鼠标右键,选择显示相同的按键绑定,修改为自己喜欢的快捷键即可。(建议仅对冲突的进行更改)文件 --> 首选项 --> 键盘快捷方式
5.vscode国内镜像快速下载地址
------ 如果文章对你有用,感谢右上角 >>>点赞 | 收藏 <<<
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)