Atom的环境配置

[wangweida]

关于Atom

一款github的开源编辑器，有着轻量可配置等优点。
当然可配置对有些人算是优点，但对一些人来说也算是缺点，毕竟配置好一个编辑器其实是个挺麻烦的事，特别是当需要的插件越来越多的时候，所以以下记录我折腾Atom以来的一些插件与其配置。

安装快捷键

cmd + shift + p 然后输入install package回车，就会出现install界面。Atom的一个好处就是配置不像sublime那么编程化，有很多操作可以通过界面来完成，但是相应的Atom也不如sublime轻量，但Atom算是轻量与易用性结合的比较好的一款编辑器。

皮肤

关于皮肤我折腾的不是很多，我比较喜欢一直用一款比较舒服的，所以只推荐一个UI与一个Syntax皮肤

• UI —— Atom Material 大概是Atom上最火的一款皮肤，安装后点击设置，建议User Interface全部勾选，Tabs勾选Compact tab bar与Tinted tab bar，github页面 link to AtomMaterial!
• Syntax —— Afterglow 我在sublime上使用的语法皮肤，看起来没那么鲜艳刺眼，缺点就是看惯了对比度较高颜色的人可能需要适应一下Afterglow

插件

• atom-ternjs 一款javascript的代码补全工具，支持node es6 jQuery等
• autocomplete-js-import import时提供文件夹路径的插件
• color-picker sublime时代就很有名的插件，快捷键是cmd + shift + c
• docblockr 同样一款sublime时代就几乎是人人必备的插件，专注于注释片段的编写输入/**回车即可
• file-icons 美化侧边栏的图标，想让你的.vue, .jsx, .eslint等文件有icon吗，赶紧安装看看
• hyperclick 快速进入import的组件查看代码，按住cmd左键点击import的组件就ok了
• language-babel与language-vue 写react与vue必备的插件
• platformio-ide-terminal 快速启动mac终端，点击crtl + ~就好，好用的我都不怎么开终端了
• emmet 地球人都知道的
• eslint 检测es代码的规范性，最开始用的时候相当麻烦，总是报错，习惯后确实感觉自己代码看着舒心很多

一些比较麻烦的配置

1. 让emmet支持jsx 写react的时候emmet语法就失效了，这让书写react的感觉变得很别扭，我们可以如下配置emmet来适配jsx。

---

点击菜单栏Atom中的keymap，在最下方加入以下代码

# Emmet for JSX
'atom-text-editor[data-grammar~="jsx"]:not([mini])':
  'tab': 'emmet:expand-abbreviation-with-tab'

2.关于eslint的配置，以下我采用全局eslint检查，并使用airbnb规范

首先全局安装eslint与airbnb规则等

npm install -g eslint 
npm install -g eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint

这里提一下jsx-a11y，是一个保证网站无障碍性(accessibility)的检测，了解相关内容可以访问accessibility，国外的大型网站一般有明确的要求做到无障碍性，不过国内一般来说不是很注重这点，如果不想启用这条规则可以去airbnb的根目录下修改

// 首先终端输入  cd /usr/local/lib/node_modules/ 然后open eslint-config-airbnb
// 在打开的js文件中注释掉react-a11y这条规则，这里可以看到我还额外配置了两个全局变量，浏览器与node
module.exports = {
  extends: [
    'eslint-config-airbnb-base',
    'eslint-config-airbnb-base/rules/strict',
    './rules/react',
    // './rules/react-a11y',
  ].map(require.resolve),
  rules: {},
  env: {
  	browser: true,
  	node: true
  }
};

做完这些我们要去根目录下创建一个.eslintrc.json，在其中配置相关选项

{
  "extends": "airbnb",
  "installedESLint": true,
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
	],
}

最后一步在atom的eslint中将use global eslint installation勾选，随便打开以前的js文件就可以看到一大片红色报错了~开始修改吧！