背景

一个后台开发转前台时，入门过程还是比较费劲的，究其根源是，我的 javascript 水平仅仅停留在 ECMAScript 1.2 的版本上，即原生态的 js 开发技术。而 ECMAScript 已经于 2015 年发布 6.0 版本了，脚本开发语句已经跟后端开发一样，朝着系统化和模块化的方向发展了，甚至也需要类似 maven 的工具 webpack 进行打包。

今天就整理下这两天学习 vue 的 IDEA 配置部分吧。

ESlint 规范

eslint 规范，真是有点反人类，虽然本人还算是有代码强迫症的后端开发人员，但是也不能保证完全按它的规范来编码。捣鼓了一天的 eslint 规范和 prettier 和各种配置后，估计找不到能自动修复不规范的途径了，于是就放弃了，决定记住常见的规则：

1. 缩进为 2 个空格
2. script 脚本不需要缩进
3. 所有的符号后面需要空格
4. 最后一个属性结尾也需要加额外的逗号

统一缩进 2 个空格

统一 JavaScript 和 html 文件的 Tab 缩进空格个数为 2 ，本地用的 IDEA 版本比较老，是 2016 的版本。Scheme default 修改后又会恢复原来的配置。而IDEA 在保存一个配置后，默认又生成一个 default(x) 的配置项，这个可以保存并生效，而且 Reformat Code 快捷键跟 windows 操作系统的快捷键冲突了，修改成 Alt + L 就可以很方便格式化 vue 代码了。

添加 vue file 类型

在 File and code template 配置中，添加 vue 类型的文件模板，以减少开发量，操作如下：

按照 eslint 规范，将 vue 必须包含的三个标签配置为模板内容：

<template>
  <div>
      {{msg}}
  </div>
</template>
<script>
export default{
  name: '${NAME}',
  data() {
      return {
          msg: '${NAME}',
      };
  },
  created() {
  
  },
  methods: {
  
  },
};
</script>
<style scoped>
</style>

配置 vue file 打开类型

前一步添加了 .vue 后缀的文件代码模板后，在 File 菜单中 new 操作右键会多出一种，且自动设置 export 模块名称为文件名：

为 vue 类型的文件关联打开方式为 html ：

配置 html 缩进忽略 vue 标签

vue 文件的 script 和 stye 标签需要遵守 eslint 规范，不需要缩进，那么就需要对 html 的文件格式进行配置，在不要缩进的元素中添加这两个要素。

npm 模块安装

npm 类似 maven 的功能，用来安装依赖的，依赖分为两种，为当前工程安装某个依赖模块，直接在该工程主目录下执行 npm install moduleName ，完成后会在 nodes_module 目录下增加该模块，就只被当前工程所依赖。而通过 npm install -g moduleName 安装的全局组件，可以被任意工程引用。

有时候不知道什么原因，就是无法导入某些模块，那么可以直接删除该 nodes_mudule 文件夹，重新为该工程安装依赖模块，前提是 cd projectDir 目录下。

IDEA 的 terminal 终端可以直接执行命令，就是在当前工程目录下，这点比较友好。

编程启示录

还有几个问题没搞明白的：

1. IDEA 的 vue.js 插件到底是起什么作用的
2. eslint 有 fix 功能，但是总是不生效，没有找到能自动修正 eslint 错误的方法
3. 偶尔碰到了编辑器直接以红色显示不符合 eslint 规范的代码，不知道为什么后来又不提示了，纯手写，对前端编码来说是个挑战
4. 熟悉了 vue 的套路后，能从原始的前端编码方式转换过来

prettier 插件是个坑，不用为好。设置好 Html 和 JavaScript 的 Code Style 后，直接用 IDE 的格式化，基本上能满足缩进相关的规范了。