美文网首页
Code编辑器插件和配置

Code编辑器插件和配置

作者: nojsja | 来源:发表于2018-07-16 00:15 被阅读0次

    Atom


    > 插件

    color-picker -- 颜色选择
    block-comments-n -- 块注释
    file-icons -- 文件图标
    seti-icons -- 文件图标 [recommand]
    markdown-preview -- md文件浏览
    tree-view-git-status -- giti状态浏览
    atom-material-ui -- theme
    minimap -- preview source code
    docblockr -- comments auto complete.
    simplified-chinese-menu -- Atom中文包
    emmet -- css style to fill html tag.
    atom-html-preview -- html实时预览
    autocomplete-paths -- 文件路径自动提示
    jquery-snippets -- jq代码自动提示完成
    autoprefixer -- 自动添加浏览器前缀
    activate-power-mode -- 代码编辑时的特效 -- cpu占用会升高
    highlight-selected -- 双击高亮选中词
    language-javascript-jsx -- jsx语法支持
    hyperclick + goto-definition -- Ctrl + click 函数跳转
    linter-jshint -- js代码检查
    git-control -- git GUIa插件
    symbol-tree-view -- atom代码解构预览插件
    jsx-comment -- jsx 注释插件
    toggler -- 正反义词切换插件(true -> false)
    color-tabs -- 自定义tab颜色
    atom-beautify -- 格式化美化代码
    svn -- 文件状态显示
    atom-material-syntax -- 配合atom-material-ui扁平化主题的编辑器主题
    css-color-name -- 键入color 名字后在提示区域里显示颜色预览
    remote-ftp -- 使用sftp协议远程编辑同步到虚拟机或服务器
    tree-view-autoresize -- 自动根据文件名长度调整文件浏览树宽度
    tree-view-copy-relative-path -- 在文件树中复制某个文件的相对路径
    atom-vim-mode-plus -- 在atom编辑器中使用vim模式
    Chester Atom -- 编辑器主题
    atom-ide-ui -- atomIDE插件,需要配合ide-typescript
    nucleus-dark-ui -- UI主题插件,比较醒目
    city-lights -- UI主题,专注代码,扁平风格
    markdown-scroll-sync -- markdown编辑同步预览
    platformio-ide-terminal -- 编辑器内嵌命令行终端
    Chester Atom -- Systax 主题
    dash -- UI主题
    seti -- UI主题 (using)
    Material Palenight -- Syntax 主题 (using)
    Nucleus Dark -- UI 主题
    autocomplete-python -- python自动补全
    python-debugger -- python调试器

    > 代码段配置

    # Your snippets
    #
    # Atom snippets allow you to enter a simple prefix in the editor and hit tab to
    # expand the prefix into a larger code block with templated values.
    #
    # You can create a new snippet in this file by typing "snip" and then hitting
    # tab.
    #
    # An example CoffeeScript snippet to expand log to console.log:
    #
    # '.source.coffee':
    #   'Console log':
    #     'prefix': 'log'
    #     'body': 'console.log $1'
    #
    # Each scope (e.g. '.source.coffee' above) can only be declared once.
    #
    # This file uses CoffeeScript Object Notation (CSON).
    # If you are unfamiliar with CSON, you can read more about it in the
    # Atom Flight Manual:
    # http://flight-manual.atom.io/using-atom/sections/basic-customization/#_cson
    
    '.source.js':
      'head comment':
        'prefix': 'head-comment'
        'body': '''
                /**
                * @name: $1
                * @description: $2
                * @author: 杨伟(yang.wei@datatom.com)
                */
                '''
      'block comment':
        'prefix': 'block-comment'
        'body': '''
                /**
                 * [fn description]
                 * @author 杨伟(yang.wei@datatom.com)
                 * @param 参数名 {参数类型} [描述]
                 * @return {参数类型} [description]
                 */
                '''
      'line commnet':
        'prefix': 'line-comment'
        'body': '''
                /* ------------------- $1 ------------------- */
                '''
      'line commnet main':
        'prefix': 'line-comment-main'
        'body': '''
                /* ************************* $1 ************************* */
                '''
      'comments instruction':
        'prefix': 'inst-comment'
        'body': '''
                /* -----------------------------------------------------------------------------
                  说明$1
                ----------------------------------------------------------------------------- */
                '''
       'normal comment 1':
         'prefix': 'normal-comment-1'
         'body': '''
                 /*   $1   */
                 '''
    
    '.source.css':
      'component block comment':
        'prefix': 'block-comment'
        'body': '''
                /* ============================================================================
                  父组件$1
                ============================================================================= */
                '''
      'sub-component block comment':
        'prefix': 'sublock-comment'
        'body': '''
                /*  子组件$1
                ============================================================================= */
                '''
    
    '.source.sass':
      'component block comment':
        'prefix': 'block-comment'
        'body': '''
                /* ============================================================================
                  父组件$1
                ============================================================================= */
                '''
      'sub-component block comment':
        'prefix': 'sublock-comment'
        'body': '''
                /*  子组件$1
                ============================================================================= */
                '''
    
    '.text.html.basic':
      'html5 structure autocomplete':
        'prefix': 'html5'
        'body': '''
                <!DOCTYPE html>
                <html>
                  <head>
                    <title>title</title>
                    <meta charset="utf-8">
                    <!-- 中文 -->
                    <meta lang="zh-Hans">
                    <!-- 英文 -->
                    <meta lang="en">
                    <!-- 简体中文 -->
                    <meta lang="zh-cmn-Hans">
                    <!-- 繁体中文 -->
                    <meta lang="zh-cmn-Hant">
                    <!-- 优先使用新版IE和Chrome -->
                    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                    <meta name="renderer" content="webkit">
                    <!-- 百度禁止转码 -->
                    <meta http-equiv="Cache-Control" content="no-siteapp">
                    <!-- 页面关键词 -->
                    <meta name="keywords" content="1 2 3">
                    <!-- 页面描述 -->
                    <meta name="description" content="123">
                    <!-- 移动端视口viewport -->
                    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
                    <!-- 网页作者 -->
                    <meta name="author" content="name,email@gmail.com">
                    <!-- 搜索引擎抓取 -->
                    <meta name="robots" content="index,follow">
                  </head>
    
                  <body>
    
                  </body>
                </html>
                '''
    

    > 快捷键配置

    # Your keymap
    #
    # Atom keymaps work similarly to style sheets. Just as style sheets use
    # selectors to apply styles to elements, Atom keymaps use selectors to associate
    # keystrokes with events in specific contexts. Unlike style sheets however,
    # each selector can only be declared once.
    #
    # You can create a new keybinding in this file by typing "key" and then hitting
    # tab.
    #
    # Here's an example taken from Atom's built-in keymap:
    #
    # 'atom-text-editor':
    #   'enter': 'editor:newline'
    #
    # 'atom-workspace':
    #   'ctrl-shift-p': 'core:move-up'
    #   'ctrl-p': 'core:move-down'
    #
    # You can find more information about keymaps in these guides:
    # * http://flight-manual.atom.io/using-atom/sections/basic-customization/#_customizing_keybindings
    # * http://flight-manual.atom.io/behind-atom/sections/keymaps-in-depth/
    #
    # If you're having trouble with your keybindings not working, try the
    # Keybinding Resolver: `Cmd+.` on macOS and `Ctrl+.` on other platforms. See the
    # Debugging Guide for more information:
    # * http://flight-manual.atom.io/hacking-atom/sections/debugging/#check-the-keybindings
    #
    # This file uses CoffeeScript Object Notation (CSON).
    # If you are unfamiliar with CSON, you can read more about it in the
    # Atom Flight Manual:
    # http://flight-manual.atom.io/using-atom/sections/basic-customization/#_cson
    
    'atom-text-editor':
      #方向键
      'ctrl-i': 'core:move-up'
      'ctrl-m': 'core:move-down'
      'ctrl-j': 'core:move-left'
      'ctrl-l': 'core:move-right'
      #移动到行首和行尾
      'ctrl-alt-j': 'editor:move-to-first-character-of-line'
      'ctrl-alt-l': 'editor:move-to-end-of-screen-line'
      'ctrl-alt-k': 'editor:move-to-end-of-screen-line'
    
      #向前后移动一个单词
      'alt-l': 'editor:move-to-end-of-word'
      'alt-j': 'editor:move-to-beginning-of-word'
      #向前选择一个单词
      'ctrl-shift-j': 'editor:select-to-beginning-of-word'
      #向后选择一行
      'ctrl-shift-l': 'editor:select-to-end-of-line'
      #删除到单词的开头
      'ctrl-backspace': 'editor:delete-to-beginning-of-word'
      #删除一行
      'ctrl-delete': 'editor:delete-line'
      #选择下一个标签页
      'ctrl-shift-k': 'pane:show-next-item'
      #选择上一个标签页
      'ctrl-shift-i': 'pane:show-previous-item'
      #autoprefixer自动添加css浏览器前缀
      'ctrl-shift-x': 'autoprefixer'
      #markdown preview
      'ctrl-shift-m': 'markdown-preview:toggle'
    
    'atom-workspace':
      'ctrl-u': 'core:move-up'
      'ctrl-j': 'core:move-down'
    

    VsCode


    > 热键映射map

    // Place your key bindings in this file to overwrite the defaults
    [
        {
            "key": "ctrl+j",
            "command": "cursorLeft",
            "when": "textInputFocus"
        },
        {
            "key": "ctrl+l",
            "command": "cursorRight",
            "when": "textInputFocus"
        },
        {
            "key": "ctrl+i",
            "command": "cursorUp",
            "when": "textInputFocus"
        },
        {
            "key": "ctrl+m",
            "command": "cursorDown",
            "when": "textInputFocus"
        },
        {
            "key": "ctrl+alt+j",
            "command": "cursorHome",
            "when": "textInputFocus"
        },
        {
            "key": "ctrl+alt+l",
            "command": "cursorEnd",
            "when": "textInputFocus"
        },
        {
            "key": "ctrl+shift+i",
            "command": "cursorPageUp",
            "when": "textInputFocus"
        },
        {
            "key": "ctrl+shift+k",
            "command": "cursorPageDown",
            "when": "textInputFocus"
        },
        {
            "key": "alt+j",
            "command": "cursorWordStartLeft",
            "when": "textInputFocus"
        },
        {
            "key": "alt+l",
            "command": "cursorWordStartRight",
            "when": "textInputFocus"
        },
    ]
    

    > 常用插件

    1. Push -> SFTP and File based uploading

    相关文章

      网友评论

          本文标题:Code编辑器插件和配置

          本文链接:https://www.haomeiwen.com/subject/jyvmpftx.html