vscode中自动补全插件开发(vscode 自动补全)

vscode html实现代码补全

1.插件:HTML Snippets,点击安装

2.使用快捷键ctrl+shift+p搜索settings.json文件,添加以下内容

3.使用

输入!按回车,会自动生成HTML基础结构

settings.json 提示“无法在只读编辑器中修改”

打开设置,搜索要修改的字段,可以直接修改

适合前端开发人员的vscode扩展插件有哪些?

1,HTML snippets(Visual Studio Code HTML snippets)

这是一款前端开发者必备的扩展,它能将你从手动键入每个标签中解放出来。只需输入 div 然后按下回车,一对标签就出现了。更厉害的是,对于需要嵌套的标签,你可以直接用 ullia 的格式表示,按下回车后就能看到你需要的嵌套。还有一点,这个扩展已经包括所有的 HMTL5 片段。

2,JavaScript (ES6) code snippets

几乎每个前端程序员都是 JavaScript 的使用者,为了提高编写 JS 代码的效率,这个扩展很有用,并且它还支持 .ts, .tsx 和 .jsx 文件。

扩展中有很多快捷缩写,比如想要调用 export default class ClassName{},输入 ecl 按下空格即可。

3,CSS Peek

既然已经分别介绍了 HTML 和 JS 的助手,我们也不能落下 CSS。CSS Peek 是一个支持 .html 和 .js 文件的扩展,它能帮助开发者快速找到和查看选定类或 id 所用的样式。对于那些不喜欢来回切换文件或者分屏的开发者来说这个扩展很有用。

4,Angular/React/Vue

既然提到了代码片段,我们最好也提一下每个框架下的不同扩展。

对 AngularJS 来说,Angular Snippets(Version 8)是针对 AngularJS 8 的一款扩展,它为我们提供 Typescript 和 HTML 的代码片段。

对于 React.js 框架,ES7 React/Redux/GraphQL/React-Native snippets 是一个优秀的扩展,它使用 ES7 提供 React 和 Redux 的代码片段,用法和 Javascript snippets 类似,都是按空格键。

对 Vue.js 开发,有一个叫 Vetur 的扩展相当棒,它目前的下载量已经有将近2,000万。Vetur 的功能很强大,包括代码片段,Emmet,错误检查,格式化,调试和高亮语法等。

5,ESLint

如果你想要写出友好,易读,干净的代码,我建议你在 VSC 中安装一个 ESLint 扩展,它会帮助你持续养成好的编码习惯,比如缩进等。

6,Prettier 代码格式工具

说到漂亮整洁的代码,Prettier 听名字你就值得拥有。尤其在项目需要你和其他同事合作完成时,Prettier 会强势地将代码格式全部统一,让你再也不用和同事讨论自己的代码。

7,GitLens

VSC 是整合了 git 功能的,通过安装 GitLens 这个功能将会更强大,它能让你看到每一行代码是由谁在什么时候写的,并且快速查看代码提交详情,在团队协作中这个扩展很有用。

8,Auto import 自动导入包

Auto import 是一个自动导入包扩展。如果目前手头的项目是基于不同组件的,那么你需要做的就是给每个组件命名,剩下的事交给 Auto import 就好。

9,Path autocomplete 路径自动补全

提到了导入的问题,另一个重要的扩展就是能够智能补全导入文件路径的 Path autocomplete。使用时,输入 ./ 后你就会看到一个包含所有文件名的下拉菜单。当文件目录繁杂时,这个扩展真的是很好用,它为你省去了很多一层一层刨开目录的痛苦。

10,Bracket Pair Colorizer 括号着色器

括号着色器能让我们一眼看出当前代码块的反括号在哪里。有时候在稍微复杂的函数中,找到正确的那对代码并不是那么容易,但 Bracket Pair Colorizer 在你键入一个括号时就为这一对括号分配了自己的颜色,便于阅读。

11,Indenticator 缩进指示器

Indenticator 可以高亮显示出当前缩进的深度,深度由线和点表示,同样使代码更整洁,提高代码易读性。

12,Debugger for Chrome 调试器

放在最后的是重磅级的调试扩展 Debugger for Chrome。这个插件能让你在 VSC 里面直接调试 JS 文件,效果和 Chrome 的控制台中差不多,让你不用打开浏览器就直接打断点。 (BY三人行慕课)

vue VSCode 开发设置(html自动补全、eslint保存时格式化、vetur 格式化html)

File - Preference - Setting -搜索setting.json - Edit in settings.json

settings.json

方法1:File - Preference - Setting -搜索setting.json - Edit in settings.json

settings.json

Setting.json

方法2:File - Preference - 搜索框输入:files.autoSave

之后能看到 files.autoSave 的可选项有

off : 关闭自动保存(默认)

afterDelay: 延迟xx时间后保存,可在 "files.autoSaveDelay" 中配置延迟时间;

onFocusChange: 编辑器失去焦点时自动保存;

onWindowChange: 窗口失去焦点时(编辑器窗口的切换,桌面窗口的切换)自动保存;

安装 ESLint

vscode 中安装 ESLint 插件

然后配置 vscode 的 setting.json

File - Preference - User Snippers

vue.json文件,然后添加下面模板

然后新建.vue文件 ,写下vue然后Tap键就能生成什么的模板。

如果没有生成模板只是多了个空格或者生成的是vue标签的话,我们还得设置一下,打开settings.json,添加下面的设置

如果你的Setting.json文件有 "files.associations" 设置的话,请删除,因为他会和上面 emmet.syntaxProfiles 冲突。

files.associations 和 emmet.syntaxProfiles 都是设置html 标签的补全,如果是要用.vue模板补全功能的话,html标签补全我们就用 emmet.syntaxProfiles 来设置。

vue 的开发中 vscode 可装用于开发规范的插件有

Prettier :规范js

ESLint: 规范js

Vuter: 规范 .vue 文件中 template

stylus: 规范 stylus

注意:以下配置是基于接下来介绍的插件设置的,如果没有安装插件是不会生效的。

或者:

其中:

4.如果使用了stylus,那么vscode安装stylus插件,进行设置,不适用冒号双引号大括号

根目录下创建eslint规则文件 .eslintrc.js

(下面browsers 多了s 正确的为 browser )

vscode 安装 three.js 插件,实现自动补全功能

使用vscode编辑工具,安装three自动补全插件。

1、确定你安装了node;

2、在终端输入如下命令,安装插件;

3、插件安装完成后,在js文件同级建立文件jsconfig.json空文件

4、js文件就可以自动补全啦。

附:

我安装完的目录

自动补全的样子:

如何开发一个vscode插件

前端开发者对于vscode想必不陌生,它插件市场中拥有很多开发者开发的插件,让这个编辑器能力的潜力变得无限可能。如果你觉得vscode的功能不能满足你的要求,你完全可以自己去开发拓展一个插件,来增强自己vscode的功能。

我现在有一个需求,就是可以快速复制文件夹或者文件的名称。

这个该怎么做呢。让我们左手开发吧。

运行生成器,填好下方配置,比如插件名啥的。这里我选择的开发方式是typescript

先看看构建好的目录,主要文件就是package.json 和 extension.ts(因为我选择的语言是typescript

package.json

以上主要的配置就是 package.json 中的主要内容,我已经加以注释

接下来我们在 src/extension.ts 中实现

我们只需要点击 Run Extension 即可,此时将打开一个新的 vscode 窗口,显示 Extension Development Host

可以看到我们右键的菜单上成功多了一个功能。点击后成功给出提示,并能粘贴

至此,一个简单的功能便完成了。

打包成 vsix 文件

打开发布市场 官方网站 , 创建自己的发布账号,然后记录下自己的个人 token , 即可开始发布。

输入自己的账号,和 token 之后就可以发布了。等待几分钟后就可以在网页看到自己的项目

在vscode中也可以搜索到

VS Code 插件开发文档

vscode Extension API

361知讯网

本文链接:http://pdidw.com/vs/26537.html

发表评论

评论列表

还没有评论,快来说点什么吧~