系列上一篇：创建项目

由于创建项目的时候我们选择了使用 es6-lint，并且使用了 AirBNB 的 ESLint 规则，我们的 IDE 集成开发环境未必能够自动识别到 es6 的语法，这样会造成非常大的混乱，因此我们创建好项目之后的第一件事情就是要配置好编辑器使其能够正确识别 es6 语法。

我们目前用的是 WebStorm，下面将需要配置的项目逐一叙述：

一、将 JS 的解析引擎从 ES5 改成 ES6

Settings > Languages & Frameworks > Javascript

选中 ECMAScript6，不要勾选 Prefer Strict mode。

二、设置对象前后括号加空格

这一条是 AirBNB 的规则，默认情况下 WebStorm 在对象头尾没有加空格：

const obj = {a: 1, b: 2};

这样的话 AirBNB 的 eslint 规则会拦截报错，导致代码编译失败。

为了另编辑器自动将语法识别为：

const obj = { a: 1, b: 2 };

这样，在对象的花括号里面要加空格，要勾选这个选项：

Settings > Editor > Code Style > Javascript > Spaces > Within > Object literal braces

三、设置对象或数组的每一个元素后面强制加逗号，包括最后一个

这一条意思是说：

const obj = {
  a: 1,
  b: 2,
};

这种情况，b: 2, 这行，末尾的逗号是必须的，这也是 AirBNB 的规则，但是 WebStorm 不认，我们也要配上。

这次不需要进选项页，只需要找到一个高亮提示错误的地方，然后左边会出现一个灯泡，点击过去之后选择 Disable Inspection 即可。

四、修改一些实在不便的 ESLint 配置

或许我这样做显得比较业余，但是目前感觉确实有必要。

ESLint 的规则比较严格，有些的确不方便，例如不能 console.log，参数不能被重新赋值，变量定义了必须使用等等，实际操作中发现有这几条规则还是加上为妙：

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  extends: 'airbnb-base',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': {
    'import/no-unresolved': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'no-console': ["error", {
      allow: ['log', 'warn', 'error']
    }],
    'no-unused-vars': ["warn", { "args": "none" }],
    'no-param-reassign': ["error", { "props": false }],
    'newline-per-chained-call': ["error", { "ignoreChainWithDepth": 10 }],
  }
}

上述是我配置的 .eslintrc.js，只是在默认的内容基础上，rules 部分加上了一些东西，初用的时候不适感会降低。

五、安装插件以支持 *.vue 文件的语法提示

这个简单，装上 vue-for-idea 这个插件即可。

六、在 *.vue 文件里面的 es6 以及 less 语法高亮提示

留意 *.vue 文件里面的语法提示，如果发现 <script> 标签里面的 js 语法还是不支持 ES6，那么有一个解决办法就是：

http://stackoverflow.com/a/38141782/2544762

在 <script> 标签上面加上 lang="babel"

同样，如果在 <style> 标签上面不支持 less 语法的话，可以尝试使用：

<style lang="less" rel="stylesheet/less">

六、Vue 文件模板

如下图：

Settings > Editor > File and Code Templates > Files > Vue File

在这里可以设定模板，创建 vue 文件的时候会自动生成。

七、测试调试

如果要开启开发调试，可以点击左侧栏的 npm，再双击 dev 即可。

当然你也可以在命令行输入 npm run dev

---

可能产生困扰的地方大概就有这些，应该足够开始愉快使用 Vue.js 了。

---

系列下一篇：路由系统、Vuex和页面架构的建立

---

【转载请附】愿以此功德，回向 >>

原文链接：http://www.huangwenchao.com.cn/2016/10/vuejs-practise-2.html【Vuejs SPA 项目实践（二）：Webstorm IDE 的 es6 环境设置】