拿到一个外包的vue源码工程。打开一看,代码很不规范,不符合我们统一输出的风格。所以我们稍加改造,来帮我们提高一下效率吧
1、先了解几个插件
"babel-eslint": "10.1.0",
"eslint": "6.7.2", //代码检测工具
"eslint-friendly-formatter": "^4.0.1", //作用是可以让eslint的错误信息出现在终端上
"eslint-loader": "^4.0.2",
"eslint-plugin-html": "^6.1.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "6.2.2"
拷贝到devDependencies中,再npm install或yarn 一下安装依赖吧
2、往老项目根目录添加三个文件
添加.editorconfig、.eslintrc.js、.eslintignore这三个文件
3、开启Eslint一键保存自动格式化
推荐一个Webstorm中好用的插件
可以自动把驼峰式的组件转换成符合规范的kebab-case 例如:转换成. 安装完成之后选中要转换的地方,再使用快捷键Alt + M + 4 + 4即可完成转换
VSCode需要安装如下插件
Prettier - Code formatter、ESLint、Vetur