【转载】作者: ifredom
原文链接:https://blog.csdn.net/win7583362/article/details/79315055
配置详解
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
凸显缩进着色,让你的缩进一目了然
水桶套装!直接安装全部插件,插件互不干扰。
vscode插件列表中, Ctrl + 鼠标左键 + 点击标题 会弹出对应官方介绍
-
Tabnine AI
- AI 代码完成插件 【全局】
-
Code Runner
F5, 运行! 【全局】
-
Image preview
图片预览 【全局】
-
Color Highlight
颜色高亮 【全局】
-
Comment Translate
自动将英文翻译为中文 【全局】
-
Auto Rename Tag
- 自动重命名配对的HTML / XML标记 【全局】
-
HTML CSS Support
在html/css文件中快速书写属性 【 Supported Languages】
-
JavaScript (ES6) code snippets
快速书写ES6代码 【Supported languages】
-
cssrem
将css中的px自动转换为rem.再也不用计算器(大漠推介) 【局部】
-
Regex Previewer
边写正则边看结果 【全局】
-
Prettier
格式化,全世界都在使用Prettier来统一风格【局部】**
-
Eslint
Js 语法检测 【全局】
-
Tslint
Typescript 语法检测 【ts,js文件】
-
JSON to TS
将json代码转变为Ts代码 【全局】
-
Vetur
快速书写Vue代码 【vue文件】
-
Vue 2 Snippets
快速新建一个vue页面(参考文章) 【全局】
-
Markdown Preview Enhanced
Markdown文件预览 【md文件】
-
Markdown All in One
Markdown全功能snippet 【md文件】
-
koroFileHeader
生成文件头部备注 【md文件】
-
XML Tools
XML文件格式化以及高亮 【xml文件】
-
DotENV
env文件高亮 【xml文件】
-
Bookmarks
对代码片段添加书签,便于跳转 【全局】
-
Python
tab与空格的痛苦,写过python的都知道 【py文件】
-
Flutter
Flutter ! yyds 【dart文件】
-
Awesome Flutter Snippets
Flutter 代码片段速写 【dart文件】
-
Built Value Snippets
配合 Built Value
快速生成 dart 模型 【dart文件】
-
View In Browser
迅速通过浏览器打开html文件 【局部】
-
Css Peek
在html和css文件中定位class和id样式. (右键单击选择器时,选择 Go to Definition和 Peek definition,遗憾的是vue中不可用)【html/css文件】
-
Path Intellisense
路径识别,书写文件引入地址时很方便。遗憾就是,对webpack项目中的路径别名无法识别 【全局】
-
npm Intellisense
在import语句中,自动填充npm模块。【js文件】
-
language-stylus
CSS预处理器,styl后缀文件的识别扩展 【styl文件】
-
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,
"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": "first",
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": false
},
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"cssrem.rootFontSize": 100,
"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
},
"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
},
"debug.openDebug": "openOnDebugBreak",
"python.linting.enabled": false,
"minapp-vscode.disableAutoConfig": true,
"apicloud.port": "23450",
"apicloud.subdirectories": "/apicloudproject",
"dart.checkForSdkUpdates": false,
"dart.previewLsp": true,
"dart.warnWhenEditingFilesOutsideWorkspace": true,
"dart.openDevTools": "flutter",
"dart.enableCompletionCommitCharacters": true,
"dart.flutterHotRestartOnSave": true,
"dart.lineLength": 120,
"dart.previewFlutterUiGuides": true,
"dart.triggerSignatureHelpAutomatically": 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.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
},
],
"commentTranslate.multiLineMerge": true,
"commentTranslate.concise": true,
"versionlens.suggestions.showPrereleasesOnStartup": true,
"liveServer.settings.donotShowInfoMsg": true,
"vetur.ignoreProjectWarning": true,
"security.workspace.trust.untrustedFiles": "open",
"editor.bracketPairColorization.enabled": true,
}
其他功能
1. Screen Reader(屏幕阅读器)
支持windows7以上操作系统,不支持mac,作为练习英语听力的小玩具.
首先下载并安装软件,Nvda, 需要的pass: he2m
安装完成此软件后启动。在vscode中配置项editor.quickSuggestions
决定是否开启.
2. vue 项目,代码规范
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
- 要么删除此项配置,要么配置为你自己的校验规则地址
"eslint.options": {
"configFile": "D:/worksapce/my-app/.eslintrc.js",
}
4. 插件快捷键冲突问题
插件安装过多时,不可避免会出现快捷键冲突。为了解决冲突,需要打开快捷键清单,根据插件名称搜索对应插件快捷键,比如我输入: emmet, 对准任意一条快捷键选项,点击鼠标右键,选择显示相同的按键绑定,修改为自己喜欢的快捷键即可。(建议仅对冲突的进行更改)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)