vscode使用

K哇伊

已于 2024-03-21 16:38:39 修改

阅读量931

点赞数 1

分类专栏：学习文章标签： vscode rust ide

于 2021-04-02 10:29:32 首次发布

本文链接：https://blog.csdn.net/caoluotuo/article/details/115392465

版权

学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vscode常用插件

文件

【Path Intellisense】自动补全路径

css

【CSS Peek】跳转到css的定义行
【Color Info】颜色信息转换
【beautify css/sass/scss/less】 css/sass/scss/less格式化
【color highlight】颜色值在代码中高亮显示
【less intellisense】less变量与混合提示
【postCss sorting】css排序
【language-stylus】stylus语法高亮和提示
【CSS Peek】追踪至样式表中 CSS 类和 ids 定义的地方
【CSS Formatter】此扩展将格式添加到CSS。
【CSS-in-JS】提供CSS样式的自动完成选项，作为样式对象以供JS中的CSS使用（如glamorous！）。在常规CSS语法（字符串）和CSS-in-JS语法（样式对象）之间转换CSS
【px to rem & rpx & vw 】

css

【Easy Sass】转换 css、wxss、acss
【Sass】sass插件，缩进的Sass语法高亮，VSCode的自动完成和格式化程序
【SCSS Formatter】

html

【HTML Boilerplate】自动生成HTML模板
【Icon Fonts】字体标签自生成
【auto close tag】自动闭合HTML标签
【htmltagwrap】包裹HTML
【HTML css suppot】css提示，支持vue的css提示
【HTML Boilerplate】摆脱HTML 新文件重新编写头部和正文标签，直接生成模板
【HTML Format】通过自动缩进，换行和删除不必要的空格，同时保留换行符来格式化HTML文档。
【XML】此VS Code扩展提供了基于LemMinX XML Language Server创建和编辑XML文档的支持。
【Auto Rename Tag】 vscode插件之同步修改html中的成对标签
【HTML CSS Support】

【Add jsdoc comments】为所选函数签名的参数添加简单的jsdoc注释
【驼峰翻译助手】各种拖峰值转换
svg
【SVG Viewer】 svg图预览
【json tools】格式化和压缩json

vue

【vetur】 vue语法高亮
【vueHelper】vue2代码段
【Vue 3 Snippets】这个插件基于最新的Vue 2及Vue 3的API添加了代码段。
【vue-beautify2】在Visual Studio代码中美化Vue代码。
【Vue Language Features】
【Vue Peek】

react

【react playground】react租金啊运行环境
【react standard style code snippets】react standard风格代码块

【TSLint】typescript语法检查
【Typescript import】ts自动import

注释

【better comments】编写更加人性化的注释
【document this】注释文档生成
【vscode-fileheader】头部添加维护者信息

语法检查

【eslint】 eslint插件高亮提示
【stylelint】css/sass/less代码风格

VS code编译器设置

【VS code icon】文件图片标识
【vscode-random】随机字符串生成器
【styled-components】VS coed-component高亮支持
【VS coed-styled-jsx】styled-jsx高亮支持

git

【git blame】在状态栏显示当前行的git信息
【git history】查看git log
【gitLens】显示文件最近的commit和作者，显示当前行commit信息
【gitignore】.gitignore文件语法
【Git Graph】

其他

【Minify】代码压缩
【Change Case】变量名格式转换
【Regex Previewer】正则表达式预览
【Language and Framework Packs】语言和框架添加自动填充，适当的缩进和其他实用功能
【bookmarks】添加行书签
【code spell checker】单词拼写检查
【file peek】根据路径字符串，快速定位到文件
【font-awesome codes for html】fontawesome提示代码段
【guides】高亮缩进基准线
【path autocomplete】完整路径提示
【project manager】切换项目
【REST client】发送REST风格的HTTP请求
【sort lines】排序选中行string manipulation
【test spec generator】测试用例生成
【version lens】package.json文件显示模块当前版本和最新版本
【view node package】快速打开选中模块主页和代码仓库
【filesize】状态栏显示当前文件大小
【markdownlint】markdown格式提示
【npm intellisense】导入模块提示已安装模块名称npm
【Open In Browser】vscode直接打开浏览器
【Prettier】代码格式
【SVG Viewer】在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项
【Minify】用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier，与 JavaScript、CSS 和 HTML 协同工作。
【Change Case】修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等
【Themes】切换svcode漂亮的主题
【Live Server】

vscode的 settings.json 文件配置

// {
// "workbench.colorTheme": "Quiet Light",
// "vetur.format.options.tabSize": 4,
// // 100 列后换行
// "editor.wordWrapColumn": 100,
// // 保存时格式化
// "editor.formatOnSave": false,
// // 开启 vscode 文件路径导航
// "breadcrumbs.enabled": true,
// // prettier 设置语句末尾不加分号
// "prettier.semi": false,
// // prettier 设置强制单引号
// "prettier.singleQuote": true,
// // 显示 markdown 中英文切换时产生的特殊字符
// "editor.renderControlCharacters": true,
// // eslint 检测文件类型
// "eslint.validate": [
// "javascript",
// {
// "language": "vue",
// "autoFix": true
// },
// "html",
// "vue",
// "javascriptreact",
// {
// "language": "html",
// "autoFix": true
// },
// {
// "language": "vue",
// "autoFix": true
// }
// ],
// // vetur 的自定义设置
// "window.zoomLevel": 0,
// "terminal.integrated.rendererType": "dom",
// "editor.suggest.snippetsPreventQuickSuggestions": false,
// "emmet.triggerExpansionOnTab": true,
// "files.associations": {
// ".cjson": "jsonc",
// ".wxss": "css",
// ".wxs": "javascript",
// ".html": "html",
// ".vue": "html",
// // ".vue": "vue", //解决使用sacc的代码问题
// },
// "git.autofetch": true,
// "files.eol": "\r\n",
// "vetur.validation.template": false,
// "vetur.format.defaultFormatter.js": "vscode-typescript",
// "vetur.format.defaultFormatter.html": "js-beautify-html", // 选择 vue 文件中 template 的格式化工具
// "vetur.format.defaultFormatterOptions": {
// "js-beautify-html": {
// "wrap_attributes": "auto"
// },
// "prettyhtml": {
// "printWidth": 100,
// "singleQuote": false,
// "wrapAttributes": false,
// "sortAttributes": false
// }
// },
// "eslint.autoFixOnSave": true, // 设置 eslint 保存时自动修复
// "eslint.options": {
// "extensions": [
// ".js",
// ".vue"
// ]
// },
// "easysass.compileAfterSave": true,
// "easysass.formats": [ //nested：嵌套缩进的 css 代码。
// //expanded：没有缩进的、扩展的css代码。
// //compact：简洁格式的 css 代码。
// //compressed：压缩后的 css 代码
// {
// "format": "expanded",
// "extension": ".css"
// },
// {
// "format": "compressed",
// "extension": ".min.css"
// }
// ],
// "easysass.targetDir": "css/", //路径
// // 修改500ms后自动保存
// "editor.formatOnSaveTimeout": 500,
// "files.autoSave": "afterDelay",
// "files.autoSaveDelay": 500,
// "editor.codeActionsOnSaveTimeout": 500,
// "[javascript]": {
// "editor.defaultFormatter": "vscode.typescript-language-features"
// },
// "workbench.tree.indent": 20,
// "editor.tabCompletion": "on",
// "editor.useTabStops": false,
// "editor.detectIndentation": false,
// "cssrem.rootFontSize": 75,
// "cssrem.fixedDigits": 4,
// }
{
    "files.autoSave": "afterDelay",
    "go.buildOnSave": true,
    "go.lintOnSave": true,
    "go.vetOnSave": true,
    "go.buildFlags": [],
    "go.lintFlags": [],
    "go.vetFlags": [],
    "go.useCodeSnippetsOnFunctionSuggest": false,
    "go.formatOnSave": false,
    "go.formatTool": "goreturns",
    "window.zoomLevel": 0,
    "files.autoGuessEncoding": true,
    "emmet.triggerExpansionOnTab": true,
    "files.associations": {
        ".cjson": "jsonc",
        ".wxss": "css",
        ".wxs": "javascript",
        ".html": "html",
        ".vue": "vue"
    },
    "git.autofetch": true,
    "files.eol": "\r\n",
    "vetur.validation.template": false,
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto"
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
        "vue"
    ],
    "eslint.autoFixOnSave": true,
    "workbench.startupEditor": "welcomePage",
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "python.jediEnabled": false,
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "git.enableSmartCommit": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "[css]": {
        "editor.defaultFormatter": "aeschli.vscode-css-formatter"
    },
    "cssrem.rootFontSize": 75,
    "px-2rem.px-per-rem": null,
    "cssrem.fixedDigits": 4,
    "px-to-rem.px-per-rem": 75,
    "px-to-rem.only-change-first-ocurrence": true,
    "git.ignoreMissingGitWarning": true,
    "cssrem.ingoresViaCommand": [
        "/* px / rem */"
    ],
    "editor.wordWrap": "on",
    "terminal.integrated.shell.windows": "C:\Windows\Sysnative\cmd.exe",
    "merge-conflict.autoNavigateNextConflict.enabled": true,
    "git.confirmSync": false,
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbench.colorCustomizations": {},
}```