如果想配置 sublime 开发工具 => 面向web前端及node开发人员的vim配置
如果想配置 vim 开发工具 => sublime配置及使用技巧
所谓网红编辑器,我觉得比vim来的更爽,因为vim的所有操作和插件,对于vs code 来说也就是一个插件就能无缝兼容。
比如我之前是一直在使用 sublime 的,使用vs code 之后明显感觉 vscode 无论是配置还是使用都更顺手一点,学习成本很小。当然本文不是谈哪个编辑器更好的问题,每个软件都在发展,相互学习和补充才是重点。
作为一个前端开发,vs code 开箱即用的代码编辑、高亮、提示都十分友好。但作为一个追求完美的程序员,还是装了不少插件,比如
前端开发用的一些插件:
- Auto Rename Tag: 当你编辑HTML标签是会自动修改配对标签
- HTML Class Suggestions: HTML class 名称提示
- ESLint: ES 语法检查
- Hap Extension: 快应用开发基础支持
- JavaScript(ES6) code snippets: js 代码片段,提高编码速度
- open in browser: 在浏览器打开页面,这个已经不常用了,但对于前端初学者还是很友好的
- QuickApp For Highlighter: 快应用开发高亮
- Color Info: css 中颜色预览
工程化也需要一些插件:
- npm: npm 管理
- npm Intellisense: npm 自动配置
- GitLens: git 记录查看
- minify: 代码压缩
写作办公也需要一些工具呀:
- Excel Viewer: 实际感觉只能预览 csv 文件,不过这也够用了
- Markdown PDF: markdown 转 pdf
- Markdown TOC: markdown 目录生成
- Markdown+Math: markdown 中数学公式支持
- vscode-pdf: pdf 阅读插件
编辑器本身的插件
- seti-icons: 文件icon
- Theme - Seti-Monokai: 高亮及编辑器外观
- Sublime Text Keymap and Settings Importer: sublime 功能键及配置映射
- Sublime Babel: sublime
- vscode-faker: 随机数据生成
其他的一些工具
- SVG Viewer: SVG 图片预览
- xtemplate: xtpl 文件高亮支持
我安装了sublime 的插件,其实还有vim 的插件,安装后无缝兼容 .vimrc 配置和 vim plugin。正常的快捷键可以看参考下图,其实和 sublime 差不了太多。
对于一些不如意的地方,可以在配置文件中进行配置,个人感觉 vs code 配置开放比 sublime 更丰富。
{
"beautify.language": {
"js": {
"type": [
"javascript",
"json"
],
"filename": [
".jshintrc",
".jsbeautify"
]
},
"css": [
"css",
"scss",
"less"
],
"html": [
"htm",
"html"
]
},
"debug.showInStatusBar": "always",
"debug.node.autoAttach": "off",
"beautify.tabSize": 2,
"css.lint.duplicateProperties": "warning",
"css.lint.idSelector": "warning",
"css.lint.universalSelector": "warning",
"css.lint.zeroUnits": "error",
"less.lint.duplicateProperties": "warning",
"less.lint.idSelector": "warning",
"less.lint.universalSelector": "warning",
"less.lint.zeroUnits": "error",
"scss.lint.duplicateProperties": "warning",
"scss.lint.idSelector": "warning",
"scss.lint.universalSelector": "warning",
"scss.lint.zeroUnits": "error",
"csv-preview.skipComments": true,
"csv-preview.lineNumbers": true,
"editor.formatOnPaste": true,
"editor.find.autoFindInSelection": true,
"editor.formatOnSave": true,
"editor.fontSize": 14,
"editor.formatOnType": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.minimap.enabled": false,
"editor.snippetSuggestions": "top",
"editor.tabSize": 2,
"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
"emmet.includeLanguages": {
"vue-html": "html",
"javascript": "javascriptreact"
},
"emmet.triggerExpansionOnTab": true,
"emmet.showAbbreviationSuggestions": false,
"eslint.autoFixOnSave": true,
"eslint.options": {
"configFile": "/Users/faremax/eslintrc.json"
},
"eslint.run": "onSave",
"eslint.workingDirectories": [
"./public",
"./src"
],
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"explorer.openEditors.visible": 4,
"files.associations": {
"*.ux": "ux"
},
"files.autoSave": "onFocusChange",
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/node_modules": true
},
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
"git.detectSubmodules": false,
"gulp.autoDetect": "off",
"grunt.autoDetect": "off",
"html.format.wrapLineLength": 0,
"jake.autoDetect": "off",
"javascript.implicitProjectConfig.experimentalDecorators": true,
"markdown-pdf.displayHeaderFooter": false,
"markdown-pdf.margin.left": "1.8cm",
"markdown-pdf.margin.right": "1.8cm",
"markdown-pdf.margin.top": "1cm",
"markdown.preview.lineHeight": 1.5,
"markdown.styles": [
"/Users/faremax/github-markdown.css"
],
"markdown-pdf.styles": [
"/Users/faremax/github-markdown.css"
],
"markdown-toc.insertAnchor": true,
"open-in-browser.default": "Google Chrome.app",
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/build": true,
"**/dist": true,
},
"search.location": "sidebar",
"svgviewer.enableautopreview": true,
"terminal.explorerKind": "integrated",
"window.restoreWindows": "all",
"workbench.statusBar.feedback.visible": false,
"window.zoomLevel": 0,
"workbench.colorTheme": "Monokai",
"workbench.startupEditor": "newUntitledFile"
}
vs code 还有很多实用技巧,可以看官方github: https://github.com/Microsoft/vscode
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。