- 使用eslint规范检测
一般在团队开发中每个人的代码习惯都不太一样，这样就会导致代码风格不一致，以致于维护和修改bug的时候看别人的代码灰常痛苦。使用eslint规范代码，统一代码风格。
- stylelint规范css代码
说到代码格式化前端同学们一般都知道使用eslint格式化js代码，但css大部分同学平时工作中不太重视，导致团队css代码较乱。一套好的css代码不仅可以提高代码可维护性还能提高页面的渲染性能。下面介绍下stylelint校验并自动格式化css代码。
stylelint主要包含以下功能
- 支持最新css语法-包含自定义属性和一些Level 4的css属性
- 支持css预处理-包含scss、sass、less、sugarss
- 包含170中内置规则-包含错误检测和代码风格校验
- 插件机制-可以自定义自己的规则
- 自动修复
安装
npm install --save-dev stylelint stylelint-config-standard stylelint-config-recess-order stylelint-order
配置
项目跟目录下新建.stylelintrc.json文件，配置如下
'use strict';
module.exports = {
"extends": ["stylelint-config-recommended"],
"rules":{
"unit-no-unknown": false,
"unit-no-unknown": true, //禁止未知单位
"indentation": null, //缩进
"color-hex-case": [
"lower", {
"message": "Lowercase letters are easier to distinguish from numbers"
}
],
"max-empty-lines": 2,
"unit-whitelist": ["em", "rem", "%", "s", "px", "upx", "deg"],
"number-leading-zero": null,
"function-calc-no-invalid": null,
"no-descending-specificity": null,
"selector-pseudo-class-no-unknown": null,
"selector-type-no-unknown": null,
"at-rule-no-unknown": null,
"font-family-no-missing-generic-family-keyword": null
}
}
属性顺序
除了格式化方面的检测css属性顺序编写也很重要，正确的样式顺序利于维护者查看同时还对渲染性能有一定提升。一般建议css顺序如下：
（1）定位属性：position display float left top right bottom overflow clear z-index
（2）自身属性：width height padding border margin background
（3）文字样式：font-family font-size font-style font-weight font-varient color
（4）文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
（5）css3中新增属性：content box-shadow border-radius transform
css顺序校验需要添加stylelint-order插件同时使用stylelint-config-recess-order预设。通过以下配置我们就不需要记这么多css属性书写顺序了。
"extends": ["stylelint-config-recommended", "stylelint-config-recess-order"],
"plugins": [
"stylelint-order"
],
自动格式化
上面介绍了stylelint发现有问题的代码，但是如果是老项目引入stylelint手动修改的话要是比较耗费时间的，此时自动格式化就尤为重要了。
package.json中添加配置
"scripts": {
"lint": "npm run lint:css",
"lint:css": "stylelint app/build/style/ --fix"
},
"pre-commit": [
"lint"
],
- 配置路径别名
模块化开发项目中，比如vue和react等，经常需要import不同的js或者css模块到当前目录，那么如果路径比较深的话使用相对路径就比较麻烦，而且在文件迁移的时候，如果在不同的目录下边，又得改变以下引入的路径。所以我们可以使用webpack配置路径别名，在引入的时候我们直接使用这个别名，就可以正确的指向。
配置
在webpack.config.js中的resolve下的alias属性做以下配置：
resolve: {
extensions: ['.js', '.jsx', '.json', '.less'],
alias: {
'@app': path.resolve('app'),
'@components': path.resolve('app/build/components'),
'@images': path.resolve('app/build/images'),
'@common': path.resolve('app/build/common'),
'@actions': path.resolve('app/build/actions'),
'@enums': path.resolve('app/enums'),
'@styles': path.resolve('app/build/style')
}
},
如果需要智能提示跳转到指定文件
需要在根目录下添加jsconfig.js文件，并做如下配置
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@app/*": ["app/*"],
"@components/*": ["app/build/components/*"],
"@images/*": ["app/build/images/*"],
"@common/*": ["app/build/common/*"],
"@actions/*": ["app/build/actions/*"],
"@enums/*": ["app/enums/*"],
"@styles/*": ["app/build/style/*"]
},
"target": "ES6",
"module": "commonjs",
"jsx": "react",
"allowSyntheticDefaultImports": true
},
"include": [
"app/**/*"
],
"exclude": ["node_modules"]
}
然后使用
- @components就可以指向到app/build/components
- @common指向到app/build/common
使用：
import MultiLockedButton from '@components/view/customer/multi_locked_button.jsx';
import { fetch } from '@common/api';
- react项目中，告别binding，支持箭头函数
安装依赖
npm install --save-dev babel-plugin-transform-class-properties
.babelrc中添加配置
"plugins": [ "transform-class-properties"]
使用方法
// 查询
const handleSearch = (formData) => {
//your code
};
5、react项目中支持async
安装依赖
npm install --save-dev babel-plugin-transform-runtime
.babelrc中添加配置
"plugins": ["transform-runtime"]