七叶笔记 » java编程 » vscode 前端最佳配置小结

vscode 前端最佳配置小结

sync是用于同步vscode配置使用,不用每一次换个电脑都要复制一次配置,避免丢失或者改动,保持一致!

apicloud 是用于同步vscode开发apicloud程序时进行手机wifi真机同步使用,不用数据线即可调试。

vetur 和prettier和stylus是用于vue开发时的代码格式化, 代码提示.

eslint 是用于代码格式化代码时,选择用自己的格式化规则或者标准规则,prettier规则等

filesize在底部状态栏左侧,显示当前文件大小,没啥用

Live Server快速启动一个本地服务器,注意只对.html和.htm文件有效。对html文件点击鼠标右键,选择open with Live Server

Sublime Text Keymap很多FD习惯使用sublime的一套快捷键。

屏幕阅读器优化, 可选项. 此功能是 vscode 专门配合盲人阅读器而做的贴心选项,对于程序员来说也有一定作用( 哈哈哈, 可以纠正中式英文发音):当你的鼠标悬浮在桌面任何位置,语音朗读器都会朗读出来所在位置的内容。一旦在vscode中开启,那么底部会显示如图所示。具体如何设置在文尾。

vscode插件安装

Atom One Dark Theme 主题 VSCode Great Icons 图标主题 Beautify 美化vscode代码 Bracket Pair Colorizer 每一对括号用不同颜色区别 (括号强迫症必备) indent-rainbow 凸显缩进,让你的缩进一目了然 Prettier 格式化,使用标准风格,快捷键 alt+shift +F EditorConfig for VS Code vscode的配置文件 cssrem 将css中的px自动转换为rem.再也不用计算器了(大漠大神推介) Code Runner node,python等代码不必开命令行即可运行 Eslint 语法检测 GitLens 在代码中显示每一行代码的提交历史 HTML CSS Support vscode对html,css文件支持,便于你快速书写属性 Vetur 添加对.vue后缀文件的快速书写支持。 Vue 2 Snippets 快速新建vue页面(参考我另一篇文章) React Native Tools 添加对 React Native项目的支持,快速书写es6以及jsx C/C++ 运行React Native项目时,有些文件的查看需要这个 View In Browser 迅速通过浏览器打开html文件 Sublime Text Keymap 启动sublimeText的快捷键配置。vscode上面自有一套快捷键设定,个人习惯sublime快捷键 markdownlint 书写md文件的预览插件 Path Intellisense 路径识别苦战,比如书写图片路径时。遗憾就是,对webpack项目中的路径别名无法扩展 npm Intellisense 在import语句中,自动填充npm模块。 language-stylus CSS预处理器,styl后缀文件的识别扩展 Settings Sync 用于同步vscode配置,多台电脑一份配置(相对而言配置复杂,可不安装) filesize 在底部状态栏左侧,显示当前文件大小,还可以点击哟 Document This 快速生成注释,注意只对类和函数有效。快捷键 Ctrl+Alt+D Live Server 快速启动一个本地服务器 Python 添加对.py文件的支持,毕竟tab与空格的痛苦,写过python的都知道 Flutter 2018是 Flutter 最火爆的一年,2019持续爆炸

其他功能

在文件头添加用户作者,逼格满满,效果如图

文件 > 首选项 >用户代码片段>新建全局代码片段,粘贴保存。 测试方法:新建文件,输入内容author即可

Screen Reader(屏幕阅读器)

只支持windows7以上操作系统,不支持mac.

可用可不用,作为练习英语听力的小玩具.

首先下载并安装软件,Nvda, 需要的pass: he2m 安装完成此软件后启动。在vscode中配置项editor.quickSuggestions决定是否开启.

vue项目,标准格式化规范

.eslintrc.js

到此这篇关于vscode 前端最佳配置小结的文章就介绍到这了,更多相关vscode 前端最佳配置内容请搜索七叶笔记以前的文章或继续浏览下面的相关文章希望大家以后多多支持七叶笔记!

相关文章