选择理由
- 轻量且强大的代码编辑功能
- 丰富的插件生态系统
下载
- 官网下载code.visualstudio.com/Download
- 文件夹中的版本是1.58.2
- 本文所有内容在1.58.2版本上试过
安装
傻瓜式安装，下一步下一步就行
VScode面板介绍
左边的五个按钮
- 现在编辑器打开的文件，可以同时打开多个文件
- 全局搜索
- git管理器，非常好用，解决冲突啥的很方便（需要在setting中设置git路径，下面有）
- debug
- 插件搜索安装，VScode提供非常多的插件
配置文件
基本设置
打开方式：文件--首选项--设置
- 可以选择配置
- 可以编辑setting.json文件修改默认配置
- 下面是我的配置文件
{
// 相关文件高亮，配合HTML Snippets插件
"files.associations": {
"*.vue": "vue",
"*.wpy": "vue",
"*.wxml": "html",
"*.wxss": "css"
},
"emmet.showAbbreviationSuggestions": true,
"emmet.showExpandedAbbreviation": "always",
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html",
"wpy": "html"
},
// 删除时是否需要确认
"explorer.confirmDelete": false,
// 文字大小
"editor.fontSize": 14,
"window.zoomLevel": 1,
"editor.wordWrap": "on",
//失去焦点后自动保存
"files.autoSave": "onFocusChange",
// 每次保存的时候自动格式化；
"editor.formatOnSave": false,
//每120行就显示一条线
"editor.rulers": [
],
// 在使用搜索功能时，将这些文件夹/文件排除在外
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/target": true,
"**/logs": true,
},
// 这些文件将不会显示在工作空间中
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/*.js": {
"when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中
},
"**/node_modules": true
},
"beautify.language": {
"js": {
"type": ["javascript", "json"],
"filename": [".jshintrc", ".jsbeautifyrc"]
},
"css": ["css", "less"],
"html": ["htm", "html"],
"beautify.config": {
"brace_style":"collapse,preserve-inline",
"indent_size": 4
}
},
// 默认谷歌浏览
"view-in-browser.customBrowser": "chrome",
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
"tabnine.experimentalAutoImports": true,
// 自动生成注释配置配合插件使用
// 头部注释
"fileheader.customMade": {
"author":"yangfeng",
"date":"",
"description":""
},
// 函数注释
"fileheader.cursorMode": {
"author":"yangfeng",
"description":"",
"param":"",
"return":""
},
// todo高亮配合插件使用
"todohighlight.isEnable": true,
"gitlens.advanced.messages": {
"suppressGitMissingWarning": true
},
"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\|;:'",.<>/?",
"workbench.editor.enablePreview": false, //打开文件不覆盖
"eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
"prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
// 重命名或移动文件时，启用或禁用自动更新导入路径
"javascript.updateImportsOnFileMove.enabled": "always",
// 启用/禁用导航路径
"breadcrumbs.enabled": true,
// 终端cmd字号
"terminal.integrated.fontSize": 16,
// 编辑器初始界面
"workbench.startupEditor": "newUntitledFile",
// 工作台状态栏是否可见
"workbench.statusBar.feedback.visible":false,
// 添加多个光标时候需要的快捷键
"editor.multiCursorModifier": "ctrlCmd",
// 自定义代码片段显示的位置
"editor.snippetSuggestions": "top",
// 启用后，按下 TAB 键，将展开 Emmet 缩写。
"emmet.triggerExpansionOnTab": true,
// 控制编辑器在空白字符上显示符号的方式
"editor.renderWhitespace": "all",
// 控制编辑器是否应呈现空白字符
"editor.renderControlCharacters": false,
// 在文件和文件夹上显示错误和警告
"problems.decorations.enabled": false,
// html文件格式化程序
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features",
"editor.codeActionsOnSave": {
// 禁止eslint对html进行校验
"source.fixAll.eslint": false,
// 禁止stylelint对html进行校验
"source.fixAll.stylelint": false
}
},
"editor.codeActionsOnSave": {
// 文件保存时开启eslint自动修复程序
"source.fixAll.eslint": true,
// 文件保存时开启stylelint自动修复程序
"source.fixAll.stylelint": true
},
"stylelint.config": {
"extends":"./.stylelintrc"
},
"stylelint.enable":true,
"git.path": "D:/Git/bin/git.exe"
}
必装插件
安装方式：插件安装中搜索（如Chinese）——>install——>重启编辑器
英语不好，所以安装软件第一步是设置成中文
vue相关插件
vetur
- vue相关语法高亮、智能感知，.vue文件高亮
VueHelper
- js文件中，vue的生命周期、相关属性自动补全
ESLint
- 插件安装
- 前端install之后生效
StyleLint
- 参照juejin.cn/post/699987…
- 不用添加js后缀也可以
设置class能够双击选中，按住ctrl点击可以调整对应页面
预览网页（View In Browser）
给嵌套括号加上不同颜色（Bracket Pair Colorizer）
- 非常方便查找js语块
自动匹配html标签（Auto Rename Tag）
- 修改html标签时，结束标签自动跟随改变
智能路径提示（Path Intellisense）
实时预览 markdown（Markdown Preview）
查看空格是否一致（indent-rainbow）
- 空格不是4的倍数会标红
代码运行器
- 可以允许某几行代码非常好用
代码自动匹配，将最近使用的方法优先提示（Tabnine ）
生成文件备注（koroFileHeader ）
npm模块导入提示（npm Intellisense）
高亮TODO（TODO Highlight ）
- // TODO:需要加冒号
