Atom

[LingYanSi]

快捷键

• ctrl + alt + L 左右分屏
• ctrl + alt + K 上下分频
• cmd + shift + p 模糊匹配命令
• cmd + T 匹配文件
• cmd + k + U 大写
• cmd + k + L 小写
• cmd + shift + ➡️ 向右选中
• cmd + shift + ⬅️ 向左选中
• cmd + d 选中同样字符
• ctrl + cmd + G 选中所有同样字符
• ctrl + M 跳到括号边
• ctrl + cmd + M 选中括号内的内容 [] () {}
• ctrl + shiflt + L 编辑模式 语法高亮相关
• ctrl + G 跳转到指定行
• ctrl + J 合并行
• cmd + shift + L 把选中区域变成多行编辑模式
• cmd + L 选中当前行，连按，选中下一行
• cmd + ↑/↓ 文章最前 最后
• cmd + alt + [ 折叠当前代码块
• cmd + alt + [ 伸开当前代码块
• cmd + alt + shift + [ 折叠所有代码块
• cmd + alt + shift + [ 伸开所有代码块
• ctrl-0 焦点切换到目录树(再按一次或者Esc退出目录树)

web插件

更多信息

[LingYanSi]

atom-ternjs 自动提示

参考 项目

{
  "ecmaVersion": 6,
  "libs": [
    "browser"
  ],
  "loadEagerly": [
    "path/to/your/js/**/*.js"
  ],
  "dontLoad": [
    "node_modules/**",
    "path/to/your/js/**/*.js"
  ],
  "plugins": {
    "modules": {},
    "es_modules": {},
    "node": {},
    "doc_comment": {
      "fullDocs": true,
      "strong": true
    }
  }
}

Notice

请注意不要把node放进libs里，这样会提示 Failed to find library node 修改完.tern-project配置文件需要，重启ternjs packages -> atom-ternjs -> restart server

ternjs支持webpack

但需要注意的是，ternjs会require webpack.config.js，那么在执行webpack的时候，可能会遇到fs cannot resolve such file/dir的问题 因此在webpack配置，甚至在写node的时候，特别要注意文件路径问题，都使用

path.resolve(__dirname, file_path)

就好了

特别需要注意的一点，webpack的alias不能和node的自带包名相同，否则就日了🐶了，ternjs会优先使用node自带包

[LingYanSi]

autoprefixer

虽然现在大多使用自动化工具来做这些事情，但有的时候我们可能还是需要手动添加 这时候，有这么插件就好用了

• 使用 选择需要处理的区域，然后command + shift + p 输入autoprefixer选中即可

[LingYanSi]

linter-eslint

用来校验js，不要使用大公司的配置，不然的话就到处都是错误了 因此，这里只是用基本的错误校验，主要是用来避免出现低级错误

如果修改【延迟校验时间】，可在linter内修改

目前使用的是全局的eslint

安装依赖

npm i eslint  babel-eslint eslint-plugin-import eslint-plugin-promise eslint-plugin-standard -g

我的配置

module.exports = {
    // 使用eslint，建议规范
    "extends": "eslint:recommended",
    // 使用babel-eslint作为parser，可解决大部分es6/es7的关键字问题
    "parser": "babel-eslint",
    "plugins": [
        "standard",
        "promise",
        "import",
    ],
    "env": {
        "browser": true,
        "node": true,
        "es6": true,
    },
    rules: {
        // 无console
        "no-console": "off",
        // 未使用变量
        "no-unused-vars": "off",
        // 不允许func重新赋值
        "no-func-assign": "off",
        "no-duplicate-imports": ["error", { "includeExports": true }]
    },
    // 关闭import export 错误
    "parserOptions": {
        "sourceType": "module",
    }
};

[LingYanSi]

git-time-mechine

查看单文件git提交历史

[LingYanSi]

hyperclick

js-hyperclick 用来跳转到变量定义的地方 建议把快捷键修改为option + click

对于webpack resolve alias，我们通过在package.json里添加moduleResolve来解决跳转 这也就对alias的命名又做了约束 alias要和对应的文件夹名字相同 Add configuration option for custom module paths. #32

[LingYanSi]

alinger

等号自动对齐

[LingYanSi]

自定义Atom插件

apm link --dev 可以将当前目录作为一个正在开发中的插件加载到 Atom 中，其实是在 ~/.atom/packages 中建了一个符号链接。

[LingYanSi]

ternjs

代码自动提示支持browser node jquery etc...

我的配置

{
  "ecmaVersion": "7",
  "libs": [
    "jquery",
    "browser"
  ],
  "loadEagerly": [],
  "dontLoad": [
    "node_module/**"
  ],
  "plugins": {
    "doc_comment": true,
    "node": {
      "dontLoad": "",
      "load": "",
      "modules": ""
    },
    "complete_strings": {
      "maxLength": 15
    },
    "node_resolve": {},
    "modules": {
      "dontLoad": "",
      "load": "",
      "modules": ""
    },
    "es_modules": {}
  }
}

setting

修改完配置后请重启服务

[LingYanSi]

keymap

body下的命令为用户自定义命令 unset!表示关闭指定hot key

'body':
    'ctrl-alt-l': 'pane:split-left'
    'ctrl-alt-k': 'pane:split-down'
    'shift-cmd-T': 'pane:reopen-closed-item' # 打开最近关闭
    'ctrl-alt-b': 'atom-beautify:beautify-editor'
    # 'alt-enter': 'hyperclick:confirm-cursor'

'.platform-darwin atom-workspace':
    'shift-cmd-T': 'unset!'

[LingYanSi]

snippets

代码片段 如下cson表示在js文件中 输入rea，按tab会显示body中的字符串，同时把光标定位到$1处

cson是coffeescript的json规范

'.source.js':
  'my react':
    'prefix': 'rea'
    'body': '''
            import {Component} from 'react'
            import './index.less'

            export default class $1 extends Component {
                render () {
                    return <div className="page-">

                    </div>
                }
            }
            '''