配置说明详解
- vscode配置内容在最后，已附上
editor是针对vscode的风格设置
例如 tabSize：一个tab等于2个空格，行高为24px
workbench是针对vscode的主题设置
例如 iconTheme（ 图标风格）：使用插件 vscode-great-icons （需搜索安装）
例如 colorTheme（代码颜色风格）：使用插件One Dark Pro Vivid（需搜索安装）
search.exclude 配置vscode中在项目中的哪些地方被排除搜索
files.associations 配置文件关联，比如
“files.associations”: {
“.vue”: “vue”,
“.wxss”: “css”
}
任何wxss后缀的文件会被认为是css文件 ，然后vscode会用css规则去显示代码风格，给出加载对应文件格式插件
sync是用于同步vscode配置使用，不用每一次换个电脑都要复制，很容易丢失或者改动，无法保持一致！
apicloud 是用于同步vscode开发apicloud程序时进行手机wifi真机同步使用，不用数据线。
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.formatOnPaste": true,
// 是否允许自定义的snippet片段提示,比如自定义的vue片段开启后就可以智能提示
"editor.snippetSuggestions": "top",
"workbench.iconTheme": "vscode-great-icons",
"workbench.colorTheme": "One Dark Pro Vivid",
"workbench.startupEditor": "newUntitledFile",
"html.suggest.angular1": false,
"html.suggest.ionic": false,
"files.trimTrailingWhitespace": true,
// vetur插件格式化使用beautify内置规则
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 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": false,
// 文件保存时，是否自动根据eslint进行格式化
"eslint.autoFixOnSave": false,
// eslint配置文件
"eslint.options": {
"plugins": [
"html",
"javascript",
{
"language": "vue",
"autoFix": true
},
"vue"
]
},
// eslint能够识别的文件后缀类型
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
"typescript",
"typescriptreact"
],
// 快捷键方案,使用sublime的一套快捷键
"sublimeTextKeymap.promptV3Features": true,
// 格式化快捷键 shirt+alt+F
// prettier进行格式化时是否安装eslint配置去执行，建议false
"prettier.eslintIntegration": true,
// 如果为true，将使用单引号而不是双引号
"prettier.singleQuote": true,
// 细节,配置gitlen中git提交历史记录的信息显示情况
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressResultsExplorerNotice": false,
"suppressUpdateNotice": true,
"suppressWelcomeNotice": false
},
// 开启apicloud在vscode中的wifi真机同步
"apicloud.port": "23450",
// 设置apicloud在vscode中的wifi真机同步根目录
"apicloud.subdirectories": "/apiclouduser",
// git是否启用自动拉取
"git.autofetch": true,
}
文章标签： vscode