VSCode
VSCode 提供了工作区的功能,为你的项目创建工作区,然后在工作区文件 setting 对象内添加如下设置
代码片段类插件
-
主题
- One Dark Pro
One Dark Pro 把 Atom 编辑器中流行的 “One Dark” 主题带到了 VS Code。
- vscode-icon
让 vscode 资源树目录加上图标
- color highlight
此扩展程序可样式化文档中的 CSS /网页颜色。
- Output Colorizer
输出提示的文字颜色有一些变化,方便获取关键信息
- Guides
指导线,当前所在的级别缩进线会变红,当前在哪一级一目了然
- Log File Highlighter
日志文件(.log 后缀的文件)高亮
- One Dark Pro
-
代码片段类插件
- VS Code JavaScript(ES6) snippets
这个插件为 JavaScript、TypeScript、HTML、React 和 Vue 提供了 ES6 的语法支持;
- jQuery Code Snippets
只需输入字母“ jq”即可获取所有可用的 jQuery 代码段的列表
- Reactjs code snippets
这个扩展包含 Reactjs 的代码片段,并且基于很棒的 babel-sublime-snippets 包。
- React Redux ES6 Snippets
使用 ES6 和箭头功能的 Visual Studio Code 的 React-Redux 代码段
- React-Native/React/Redux snippets for es6/es7
该扩展为您提供 ES7 中的 JavaScript 和 React / Redux 片段,以及针对 VS Code 的 Babel 插件功能
- JavaScript (ES6) code snippets
此扩展包含 Vs 代码编辑器的 ES6 语法的 JavaScript 代码片段(同时支持 JavaScript 和 TypeScript)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RsE4rs8M-1594174126440)(https://ivan-picgo.oss-cn-shenzhen.aliyuncs.com/VSCode35.png)] - Typescript React code snippets
该扩展包含 React with Typescript 的代码片段
- VS Code JavaScript(ES6) snippets
-
自动补全类插件
- Path Intellisense
自动路劲补全
- Visual Studio IntelliCode
从 GitHub 上高星的开源项目经过大量的机器学习训练,给开发者提供最合适的 IntelliSense 上下文建议功能,除此之外,还有代码格式化和规则推测等功能。
- Npm Intellisense
用于在 import 语句中自动填充 npm 模块
- IntelliSense for CSS class names
智能提示 css 的 class 名
- Vetur
Vue 的语法高亮、智能感知、Emmet 等
- Surround
在你的代码块中增加外包裹模板
- htmltagwrap
可以在选中 HTML 标签中外面套一层标签
- Image Preview
鼠标悬浮在链接或者装订线(gutter)左边可以预览到图片
- HTML CSS Support
让 html 标签上写 class 智能提示当前项目所支持的样式。目前没有用,可能是因为当前作者的开发模式是 html 和 css 分开文件开发的。
- Path Intellisense
-
功能增强插件
- Debugger for Chrome
让 vscode 映射 chrome 的 debug 功能,静态页面都可以用 vscode 来打断点调试,需要另外配置
- Project Manager
在多个项目之前快速切换的工具
- language-stylus
为 Stylus 文件添加语法突出显示,stylus 是 CSS 的预处理框架
- code spell checker
检查你的英文单词拼写是否有误,如果有库里不存在的单词则会下下波浪线
- Settings Sync
Visual Studio 代码设置同步,需要 github 账号辅助的
- JS Refactor
自动重构工具,目前没发现没怎么用
- turbo console log
自动编写有意义的日志消息
- Debugger for Chrome
-
代码检测相关插件
- ESlint
ESlint 接管原生 js 提示,可以自定制提示规则;
- TSLint
使用 TypeScript TSLint 语言服务插件将 tslint 添加到 VS Code
- Regex Previewer
这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上,并高亮所有的匹配项。
在并排文档中显示当前正则表达式的匹配项
- ESlint
-
其他
- Laravel goto view
跳转到相应的文件路径
- open in browser
当前的 html 文件用浏览器打开,快捷键 alt+b,或者右键点击 html 文件,选择 open in default Browsers
- Laravel goto view
-
图片
- SVG Viewer
无需离开编辑器,便可以打开 SVG 文件并查看它们
- SVG Viewer
setting.json 配置
方法 1:File -> Preference -> Setting ->搜索 setting.json -> Edit in settings.json
方法 2:File -> Preference -> 搜索框输入:需要配置的项
{
"window.zoomLevel": 0,
"search.followSymlinks": false,
"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.tslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
],
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
"editor.tabSize": 2,
"files.associations": {
"*.vue": "vue"
},
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"git.confirmSync": false,
"javascript.implicitProjectConfig.experimentalDecorators": true,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": true,
//"editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
"editor.codeLens": true,
"editor.snippetSuggestions": "top",
"editor.fontWeight": "none",
"stylelint.enable": true,
"editor.fontSize": 16,
"editor.rulers": [ //代码长度
120
],
"workbench.colorTheme": "One Dark Pro", //主题
"workbench.iconTheme": "vscode-icons",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"vsicons.dontShowNewVersionMessage": true //图标
}