/ atom

atom

Atom 编辑器使用 Web技术(html、css、javascript)开发,默认支持 markdown 预览功能。

设置国内源

windows 10下,找到 C:\Users\用户名\.atom目录,新建文件名为 .apmrc 的文本文件,添加如下内容:

registry=https://registry.npm.taobao.org/  
strict-ssl=false  

然后执行:

apm install --check

如果正常则会输出:

Checking for native build tools done

插件推荐:https://atom-china.org/t/atom/804

apm install atom-beautify emmet todo-show autocomplete-paths highlight-selected linter linter-htmllint linter-less linter-eslint linter-jsonlint linter-package-json-validator linter-php

自动换行

Atom默认会根据窗口宽度对文本进行自动软换行处理,如果没有的话请勾选:

在 Mac 上:

  • Atom->Preferences->Settings
    • Soft Wrap
    • Soft Wrap At Preferred Line Length

在 Windows 上:

  • File->Preferences->Editor
    • Soft Wrap
    • Soft Wrap At Preferred Line Length

常用插件

打开 Atom 设置:

  • 在 Mac 上 Command+,
  • 在 Windows 上 Control+,

点击 +Install,安装以下 Package:

  • 文档查询
    • api-docs,通过键盘查阅文档。
  • 自动补全
    • emmet,用速记符生成符合语法的 HTML。
    • autocomplete-paths,在代码中引用其他文件或目录时提供自动补全功能。
  • 代码格式化
    • editorconfighttps://atom.io/packages/editorconfig
    • atom-beautify,可辅助缩进,提高代码可读性,默认快捷键 Ctrl + Alt + B
    • linter,是一个用来检查代码语法和风格的程序,这是一个基础的 linter,与特定语言插件搭使用效果更佳。有了它,才能使用后续其他 linter 插件。
    • linter-csslint,保证 CSS 代码语法正确的同时,还能提供编写高性能 CSS 的建议。
    • linter-htmllint,确保 HTML 代码保持良好的格式。当 HTML 标签匹配错误时,编辑器会显示警告信息
    • linter-eslint,它能检查 JavaScript 代码的语法,还能通过配置检查代码的风格和格式(如每行缩进几个空格,注释前后空几行等)。
  • 代码提示
  • file-icons
  • docblockr,注释,使用方法,/** + Tab
  • react-es6-snippets,
    • rcc + rbm
    • rfunc
  • advanced-open-file
  • open-in-browser

自动补全

Enable tab completion for JSX with Emmet in Atom

  1. Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
  2. Add these lines of code to your keymap:
'atom-text-editor[data-grammar~="jsx"]:not([mini])':
  'tab': 'emmet:expand-abbreviation-with-tab'

Now open a file with JSX code, type div.myclass, press tab and it should autocomplete to

! (if it's not properly syntax highlighted, select Babel ES6 JavaScript or JSX as the syntax, this won't work otherwise)

mkdir ~/emmet
touch ~/emmet/syntaxProfiles.json

syntaxProfiles.json in ~/emmet folder

{
  "html": {
    "tag_case": "lower",
    "attr_quotes": "double",
    "self_closing_tag": true
  },
  "jsx": {
    "tag_case": "lower",
    "attr_quotes": "single",
    "self_closing_tag": true
  }
}

这里为 html 和 jsx 设置了 Tab 自动补全的设置:

  • html 元素属性使用 double (双引号)。
  • jsx 元素属性使用 single(单引号)。