转载地址:https://blog.csdn.net/win7583362/article/details/79315055/
- 最近一次更新时间: 2018.12.20 (vscode V1.30.1)
配置说明详解
- vscode配置内容在最后,已附上。可直接copy使用
editor
是针对vscode的风格设置
例如tabSize
:一个tab等于2个空格,行高为24px
workbench
是针对vscode的主题设置
例如 iconTheme( 图标风格):使用插件 vscode-great-icons (需搜索安装)
例如 colorTheme(代码颜色风格):使用插件One Dark Pro Vivid(需搜索安装)
search.exclude
配置vscode中在项目中的哪些地方被排除搜索,避免你每次搜索结果中都有一大队无关内容
files.associations
配置文件关联,比如 :任何 vue 后缀的文件会被认为是 html 文件 ,(查看编辑器右下角可见) 然后 vscode 会用 html 规则匹配 vue 文件做相应格式化,代码提示。
任何 wxss 后缀的文件会被认为是 css 文件 ,然后 vscode 会用 css 规则匹配 wxss 文件,给出加载对应的 css 的属性排序,rem 自动转换,格式化等规则
"files.associations": {
"*.vue": "html",
"*.wxss": "css"
}
- 1
- 2
- 3
- 4
sync
是用于同步vscode配置
使用,不用每一次换个电脑都要复制一次配置,避免丢失或者改动,保持一致!
vetur
和prettier
和stylus
是用于vue
开发时的代码格式化, 代码提示.
eslint
是用于代码格式化代码时,选择用自己的格式化规则或者标准规则,prettier规则等
launch
是用于启动一个本地服务器,可以直接加载你的html文件
Sublime Text Keymap
很多FD习惯使用sublime
的一套快捷键。
vscode插件安装
- Atom One Dark Theme 主题
- VSCode Great Icons 图标主题
- Beautify 美化vscode代码
- Bracket Pair Colorizer 每一对括号用不同颜色区别 (括号强迫症必备)
- cssrem 将css中的px自动转换为rem.再也不用计算器了(大漠大神推介)
- Code Runner node,python等代码不必开命令行即可运行
- Eslint 语法检测
- Git History git提交历史
- GitLens 在代码中显示每一行代码的提交历史
- **HTML CSS Support ** vscode对html,css文件支持,便于你快速书写属性
- Path Intellisense 路径识别苦战,比如书写图片路径时。遗憾就是,对webpack项目中的路径别名无法扩展
- Prettier 格式化,使用标准风格,快捷键 alt+shift +F
- Python 添加对.py文件的支持,毕竟tab与空格的痛苦写过python的都知道
- React Native Tools 添加对 React Native项目的支持,快速书写es6以及jsx
- C/C++ 运行React Native项目时,有些文件的查看需要这个
- Settings Sync 用于同步vscode配置,多台电脑一份配置(相对而言配置复杂,可不安装)
- Sublime Text Keymap 启动sublimeText的快捷键配置。vscode上面自有一套快捷键设定,个人习惯sublime快捷键
- Vetur 添加对.vue后缀文件的快速书写支持。
- Vue 2 Snippets 快速新建vue页面(参考我另一篇文章)
- markdownlint 书写md文件的预览插件
- language-stylus CSS预处理器styl后缀文件的识别扩展
- View In Browser 迅速通过浏览器打开html文件
{ // VScode主题配置
"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.formatOnSave": false,
"editor.snippetSuggestions": "top",
"editor.wordWrapColumn": 200,
"editor.wordWrap": "off",
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": false
},
// 保存时自动格式化
"editor.formatOnPaste": false,
"files.trimTrailingWhitespace": true,
"terminal.integrated.shell.windows": "C:\\windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"javascript.suggest.autoImports": true,
"workbench.iconTheme": "eq-material-theme-icons",
"workbench.startupEditor": "newUntitledFile",
"workbench.colorTheme": "Material Theme High Contrast",
"workbench.colorCustomizations": {
// 设置guide线高亮颜色
"editorIndentGuide.activeBackground": "#ff0000"
},
// 启用/禁用导航路径
"breadcrumbs.enabled": true,
// git是否启用自动拉取
"git.autofetch": true,
"minapp-vscode.disableAutoConfig": true,
"view-in-browser.customBrowser": "chrome",
// 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
},
// 配置文件关联
"files.associations": {
"*.vue": "html",
"*.wxss": "css",
"*.cjson": "jsonc",
"*.wxs": "javascript"
},
// 配置emmet是否启用tab展开缩写
"emmet.triggerExpansionOnTab": true,
// 配置emmet对文件类型的支持
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html",
"javascript": "javascriptreact",
"xml": {
"attr_quotes": "single"
}
},
// 在react的jsx中添加对emmet的支持
"emmet.includeLanguages": {
"jsx-sublime-babel-tags": "javascriptreact",
"wxml": "html"
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"wrap_attributes": "force-aligned"
},
// 是否开启eslint检测
"eslint.enable": false,
// 文件保存时,是否自动根据eslint进行格式化
"eslint.autoFixOnSave": false,
// eslint配置文件
"eslint.options": {
"configFile": "E:/aaaworkspace/ex/experience/.eslintrc.js",
"plugins": [
"html",
"vue"
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
"html",
"typescript",
"typescriptreact"
],
// 格式化快捷键 shirt+alt+F
// prettier进行格式化时是否安装eslint配置去执行,建议false
"prettier.eslintIntegration": false,
// 如果为true,将使用单引号而不是双引号
"prettier.singleQuote": true,
// 代码换行,每一行最大占有字符数
"prettier.printWidth": 200,
// 配置gitlen中git提交历史记录的信息显示情况
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressResultsExplorerNotice": false,
"suppressShowKeyBindingsNotice": true,
"suppressUpdateNotice": true,
"suppressWelcomeNotice": false
},
// 调试,本地服务器配置
"launch": {
"configurations": [{
"type": "node",
"request": "launch",
"name": "Node.js",
"program": "${file}"
},
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
],
"compounds": []
},
// 是否格式化python文件
"python.linting.enabled": false,
// 设置端口。开启apicloud在vscode中的wifi真机同步
"apicloud.port": "23450",
// 设置apicloud在vscode中的wifi真机同步根目录,默认可不设置
"apicloud.subdirectories": "/apicloudproject"
}