现在Vue这个前端框架火的一塌糊涂,连尤大神都专职维护这个项目,阿里爸爸也和Vue合作,推出WeeX,唉,不学一下都不好意思跟人打招呼了,做归做,代码规范可不能忽视,规范的代码是一个好项目的坚实基础,那么问题来了,有没有什么工具,能够自动对代码进行格式验证,自动调整不合规范的代码呢?当然有!!”鲁迅“说过:“工欲善其事必先利其器",一直用的VSCode,感觉各种插件非常丰富,灵活,也够轻量级,通过丰富的插件群,基本能够满足你的任何开发需求,最主要是:免费。
废话不多说,从一穷二白开始安装:
第一步:安装VSCode,下载地址:code.visualstudio.com/
第二步:安装nodejs,下载地址:nodejs.cn/download/
第三步: 打开VSCode,安装插件 ESLint,Vetur,vscode-icons
长这样:
第四步:使用NPM安装vue-cli,推荐全局安装,省事儿,安装完使用vue-cli初始化一个vue项目脚手架,长这样:
这样做的好处是,所有需要的配置文件,目录都给生成好了,包括我们需要的最关键的两个文件:".eslintrc.js",".eslintignore",前一个是eslint配置文件,后一个是校验忽略清单,这两个默认就好,不用动,基本够用。
第五步,最关键的一步: 打开VScode设置置窗口,文件-->首选项--->设置,找到ESLint配置
修改三个配置:
1,"eslint.autoFixOnSave",改为true,修改以后,eslint可以在你做保存动作的时候,直接自动修复你代码里的不规范的地方。
2,"eslint.options",这个配置是一个json对象,修改为以下内容
"eslint.options": { "plugins": ["html","vue"]}复制代码
3,"eslint.validate",这个配置是个数组,修改为以下内容
"eslint.validate": [ "javascript", { "language": "vue", "autoFix": true }, "html", "vue" ]复制代码
修改完以后,关闭设置窗口就可以了
最后一步:
npm安装两个个插件
安装完以后,就大工告成啦,愉快的开发吧~