前端快速开发插件
我们平时在做前端开发的时候，会不会因为工具不好用而耽误时间呢？会不会因为团队开发规则不统一而迭代困难呢？那么跟我一起来安装配置一些插件吧，让我们的开发流程更流畅，开发体验更好，项目性能更上一层楼！
一、Chrome浏览器常用插件
FeHelper官网
安装步骤：
- 1. WEB前端助手（FeHelper)
FeHelper简直就是前端开发人员的神器，它是由国人开发的一款前端工具集合的小插件，插件功能齐全，基本上涵盖了前端从业者经常会使用到的基础功能，使用起来也很顺手。下面就来感受一下强大的功能：
(1). json 格式化
(2). 页面取色
(3). JS正则表达式验证
- 2. vue-devtools
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用,被称为“Vue 调试神器” vue是数据驱动的, 利用这个插件，这样就能看到vue中每个组件的data、props、computed等多种属性和方法，为我们项目的开发与调试提供了很多的便利 。
- 3. Octotree
在GitHub边侧栏上显示代码树。非常适合查看项目源代码，无需将代码库clone到编辑器就可以如同在编辑器中操作一样， 可以直接搜索文件跳转。
- 4. Postman
Postman 插件可以复用浏览器的Cookie，更加方便测试。不论你是做后端开发还是客户端开发，Postman都是测试HTTP接口的必备利器，支持集成测试；还可以将测试请求分组，然后批量执行。
- 5. Lighthouse 前端性能优化测试工具
在前端开发中，对于自己开发的app或者web page性能的好坏，一直是让前端开发很在意的话题。我们需要专业的网站测试工具，让我们知道自己的网页还有哪些需要更为优化的方面。
lighthouse 插件会对网页的各个测试项的结果打分，并给出优化建议报告，是一个非常实用的可视化网站优化工具。
二、vue项目快速规范开发配置
- 1、gzip启用压缩，让页面加载更快
-
在我们开发的时候，为了方便调试，我们需要使用源码进行调试，但在生产环境，我们追求的更多的是加载更快，体验更好，这时候我们会将代码中的空格注释去掉，对代码进行混淆压缩，只为了让js,css文件变得更小，加载更快。但只是这样做是不够的，我们还可以做得更极致。
gzip是Web世界中使用的最为广泛的文件压缩算法，当前我们使用的大多数服务端(比如nginx)和客户端(比如chrome)都已经支持了这个算法，所以如果我们在打包Vue项目的时候，可以直接将所有的静态资源压缩为gzip,就可以极大的减少静态资源的大小，提升浏览器加载速度，那Vue项目如何配置呢？ -
添加vue.config.js 文件（vue3.0）
在新建Vue项目中，默认是没有vue.config.js文件的，首先你需要在项目根目录新建一个vue.config.js文件，然后在文件中加入以下代码module.exports = { } -
配置compression-webpack-plugin
- 安装 compression-webpack-plugin
yarn add compression-webpack-plugin -D 或者 npm(cnpm) install compression-webpack-plugin -D- 配置
修改vue.config.js文件为以下代码
const CompressionWebpackPlugin = require('compression-webpack-plugin') const isProd = process.env.NODE_ENV === 'production' module.exports = { configureWebpack: config => { if (isProd) { // 配置webpack 压缩 config.plugins.push( new CompressionWebpackPlugin({ test: /\.js$|\.html$|\.css$/, // 超过4kb压缩 threshold: 4096 }) ) } } }- 查看压缩效果
在配置上面的压缩之后，执行命令
yarn build 或者 npm(cnpm) run build会发现生成的静态文件里面新增了后缀为gz的文件
如果此时将项目部署到已开启了gzip的服务器如nginx里面之后，访问浏览器即可看到浏览器下载的是已压缩的文件
-
- 2、让moment包变得小一点
- vue开发中常用的时间处理插件moment，moment的locale语言包特别大，包含多种语言，但是我们一般的项目只在国内用，也用不到那么多语言，可以在在配置中去掉，然后直接引用中文包即可。
- 配置
在vue.config.js文件，你需要添加以下代码const webpack = require('webpack') module.exports = { chainWebpack: config => { // 优化moment 去掉国际化内容 config .plugin('ignore') // 忽略/moment/locale下的所有文件 .use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)) } } - 上面的方法忽略了包含’./locale/'该字段路径的文件目录,我们需要自己引入中文包，main.js中引入。
import moment from 'moment' //手动引入所需要的语言包 import 'moment/locale/zh-cn'; // 指定使用的语言 moment.locale('zh-cn');
- 2、生产环境删除console.log
- 安装 babel-plugin-transform-remove-console 插件
yarn add babel-plugin-transform-remove-console -D 或者 npm(cnpm) install babel-plugin-transform-remove-console -D - 配置babel.config.js
打开babel.config.js文件，然后在文件内添加// 所有生产环境 const prodPlugin = [] if (process.env.NODE_ENV === 'production') { // 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn prodPlugin.push([ 'transform-remove-console', { exclude: ['error', 'warn'] } ]) } module.exports = { plugins: [ ...prodPlugin ] }
- 安装 babel-plugin-transform-remove-console 插件
- 3、开启eslint,stylelint
-
团队开发配置这些还是很有用的，制约团队中的每个人都按照标准来开发功能，这样至少大家写的代码不至于相互看不懂。
-
（1）安装依赖
- @vue/cli-plugin-eslint
- @vue/eslint-config-prettier
- babel-eslint
- eslint
- eslint-plugin-babel
- eslint-plugin-prettier
- eslint-plugin-vue
- husky
- lint-staged
- prettier
- stylelint
- stylelint-config-recess-order
- stylelint-config-standard
- stylelint-prettier
- stylelint-scss
-
（2）同时还需要给vscode以下插件
- eslint
- stylelint
- Prettier - Code formatter
-
（3）配置vscode
在vscode的setting文件里面添加以下代码"eslint.enable":true, "eslint.options": { "extensions":[ ".js", ".vue", ".ts", ".tsx" ] }, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ], "css.validate": true, "scss.validate": true, "less.validate": true, "editor.codeActionsOnSave": { "source.fixAll": true }, -
（4）配置eslint-js
首先在项目根目录下面添加 .eslintrc.js与.eslintignore文件。
在.eslintrc.js文件内添加以下内容。// 缩略版 module.exports = { root: true, globals: { process: true }, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true, node: true, es6: true }, extends: ['plugin:vue/recommended', 'eslint:recommended'], plugins: ['babel', 'prettier'], rules:{ // 校验规则自行删改添加 // 组件名称必须是大驼峰 'vue/name-property-casing': ['error', 'PascalCase'], // 箭头函数前后必须要有空格 'arrow-spacing': [ 'error', { before: true, after: true } ], ...... } }在.eslintignore文件中添加以下代码(忽略文件)
.DS_Store node_modules /dist # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw?配置完之后，在package.json的script里面添加
"eslint": "vue-cli-service lint"然后执行 yarn eslint 就可以对代码进行格式化
vscode也会在你保存文件的时候校验一次
-
-
（5）配置eslint-style
限制js与vue是不够的，还需要限制以下style。
首先在项目根目录下面新建.stylelintrc.js与.stylelintignore文件。在.stylelintrc.js文件中添加以下内容
module.exports = { extends: ["stylelint-config-standard","stylelint-config-recess-order"], "plugins": [ "stylelint-scss" ], rules: { // 校验规则自行添加删除 // 禁止在速记属性中使用冗余值（可自动修复） padding:10px 10px 10px; 需写成 padding: 10px; "shorthand-property-no-redundant-values": true, // 禁止颜色使用大写 "color-hex-case": "lower", ....... } }.stylelintignore文件内容与.eslintignore文件内容一致(忽略文件)。
配置完之后，在package.json的script里面添加。
"stylelint": "stylelint src/**/*.{html,vue,css,sass,scss} --fix",然后执行yarn stylelint就可以对样式进行格式化，vscode也会在你保存文件的时候校验一次。
-
（6）配置husky
上面配置完之后，写代码时候vscode会自动校验格式化代码， 但就怕有人用其他编辑器没有配置插件，将未校验的代码提交到仓库里面，导致所有人的代码都爆红，这时候就需要使用husky在提交代码时候进行校验。
在git提交代码时候，会触发一系列hook钩子函数，而husky就是一个Git hooks工具。lint-staged是一个在git暂存文件上运行linters的工具,用这个工具我们在提交代码的时候，只需要对已经修改过的文件进行校验，不用检查所有文件，比较节约时间。需要在package.json文件里面添加以下代码："husky": { "hooks": { "pre-commit": "lint-staged", "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" } }, "lint-staged": { "*.{js,vue}": [ "vue-cli-service lint", "git add -A" ], "*.{html,vue,css,sass,scss}": [ "yarn stylelint" ] }这时候你如果执行git commit -m '提交描述’的时候，会发现提交之前会调用eslint与stylelint进行代码校验，校验失败无法提交。
好记性不如烂笔头！
磨刀不误砍柴工！
1145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
