统一代码规范

69 阅读1分钟

拿到一个外包的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这三个文件

image.png

3、开启Eslint一键保存自动格式化

image.png

推荐一个Webstorm中好用的插件

image.png

可以自动把驼峰式的组件转换成符合规范的kebab-case 例如:转换成. 安装完成之后选中要转换的地方,再使用快捷键Alt + M + 4 + 4即可完成转换

image.png

VSCode需要安装如下插件

Prettier - Code formatter、ESLint、Vetur

image.png