VSCode实用插件推荐 |
您所在的位置：网站首页 › vscode跳转下一行 › VSCode实用插件推荐 |
VSCode实用插件推荐
|
VSCode插件推荐
Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能，VScode毫无疑问也是目前市场上最为流行的轻量级代码编辑器之一。VS Code能够如此强大还源自于它的插件市场，一款好的插件能够较为明显的提升大家的开发效率，废话不多说，直接上插件！ 基本插件《Chinese (Simplified) (简体中文) Language》 汉语基础语言包，解救英语不好的同学~ 《Open-In-Browser》 由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项。 《Live Server》 一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。换句话说，我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。 《vscode-icons》 图标插件有很多，这里推荐VSCode官方出品的图标库。 《Atom One Dark Theme》 VSCode黑色皮肤，好康的！ 《Coding Tracker》 一个记录你在vscode内编程时间的插件，该插件要先预安装node.js。 下载完成后，按下快捷键 ctrl + shift + p，弹出对话框 ，在对话框内输入 查看你的编程记录报告。 插件运行后页面如下： 《Auto Close Tag》 自动闭合HTML/XML标签，没什么好说的，墙裂推荐！ 《Auto Rename Tag》 自动完成另一侧标签的同步修改，没什么好说的，墙裂推荐！ 《Prettier - Code formatter》 自动格式化代码插件。 修改settings: /* prettier的配置 */ "prettier.printWidth": 100, // 超过最大值换行 "prettier.tabWidth": 4, // 缩进字节数 "prettier.useTabs": false, // 缩进不使用tab，使用空格 "prettier.semi": true, // 句尾添加分号 "prettier.singleQuote": true, // 使用单引号代替双引号 "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行 "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }" "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置 "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验 "prettier.htmlWhitespaceSensitivity": "ignore", "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中 "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行 "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号 "prettier.parser": "babylon", // 格式化的解析器，默认是babylon "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验 "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号） "prettier.tslintIntegration": false, "terminal.integrated.allowMnemonics": true, "terminal.integrated.automationShell.linux": "" // 不让prettier使用tslint的代码格式进行校验 ///报错的话，检查一下有没有用逗号与上一项设置分隔《HTML CSS Support》 智能提示CSS类名以及id。 《CSS Peek》 使用 Ctrl + 鼠标左键 快速查看CSS定义。 效果如图 《JavaScript (ES6) code snippets》 js（es6）的代码片段提示、补全，提高开发效率。 《Vue VScode Snippets》 可以构建代码片段的缩写，大大节约开发时间，把时间花在逻辑上而不是繁琐的模板语法上，墙裂推荐！ 《Vetur》 vue开发者必备的扩展，有代码高亮，补齐等等功能。 《Error Lens》 当我们输入一些错误的语法格式的时候，它都会有一些提示！ 《Regex Previewer》 实时预览正则表达式的效果。 《CodeIf》 Codelf通过搜索在线开源平台Github, Bitbucket, Google Code, Codeplex, Sourceforge, Fedora Projec的项目源码，帮开发者从中找出已有的匹配关键字的变量名。这个搜索服务支持直接搜索中文。codeif支持中文查询，输入中文意思，codeif可以根据需要查询尽可能满足需要的结果，并展示与查询结果相关的支持各种编程语言的代码片段以及代码库。 《Highlight Matching Tag》 突出显示匹配的开始和/或结束标签。官方支持的标记：HTML和JSX。其他样式（XML，Vue，Angular，PHP）也可以使用，但不能保证正常使用。 《image preview》 预览图片插件，推荐！ 《Color Highlight》 可以用来设置 CSS 颜色的样式。除了 CSS 之外，它还会对不显示默认颜色的 JavaScript、HTML、JSON 等文件进行着色。该插件会对颜色名称、RGB、RGBA 和十六进制颜色进行着色。 |
【本文地址】