- 使用eslint規(guī)范檢測
一般在團(tuán)隊開發(fā)中每個人的代碼習(xí)慣都不太一樣矛缨，這樣就會導(dǎo)致代碼風(fēng)格不一致，以致于維護(hù)和修改bug的時候看別人的代碼灰常痛苦帖旨。使用eslint規(guī)范代碼箕昭，統(tǒng)一代碼風(fēng)格。
- stylelint規(guī)范css代碼
說到代碼格式化前端同學(xué)們一般都知道使用eslint格式化js代碼解阅，但css大部分同學(xué)平時工作中不太重視落竹，導(dǎo)致團(tuán)隊css代碼較亂。一套好的css代碼不僅可以提高代碼可維護(hù)性還能提高頁面的渲染性能货抄。下面介紹下stylelint校驗并自動格式化css代碼述召。
stylelint主要包含以下功能
- 支持最新css語法-包含自定義屬性和一些Level 4的css屬性
- 支持css預(yù)處理-包含scss、sass蟹地、less积暖、sugarss
- 包含170中內(nèi)置規(guī)則-包含錯誤檢測和代碼風(fēng)格校驗
- 插件機(jī)制-可以自定義自己的規(guī)則
- 自動修復(fù)
安裝
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, //縮進(jìn)
"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屬性順序編寫也很重要怪与，正確的樣式順序利于維護(hù)者查看同時還對渲染性能有一定提升夺刑。一般建議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預(yù)設(shè)。通過以下配置我們就不需要記這么多css屬性書寫順序了分别。
"extends": ["stylelint-config-recommended", "stylelint-config-recess-order"],
"plugins": [
"stylelint-order"
],
自動格式化
上面介紹了stylelint發(fā)現(xiàn)有問題的代碼遍愿，但是如果是老項目引入stylelint手動修改的話要是比較耗費(fèi)時間的，此時自動格式化就尤為重要了耘斩。
package.json中添加配置
"scripts": {
"lint": "npm run lint:css",
"lint:css": "stylelint app/build/style/ --fix"
},
"pre-commit": [
"lint"
],
- 配置路徑別名
模塊化開發(fā)項目中沼填，比如vue和react等，經(jīng)常需要import不同的js或者css模塊到當(dāng)前目錄括授，那么如果路徑比較深的話使用相對路徑就比較麻煩坞笙，而且在文件遷移的時候，如果在不同的目錄下邊荚虚，又得改變以下引入的路徑薛夜。所以我們可以使用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')
}
},
如果需要智能提示跳轉(zhuǎn)到指定文件
需要在根目錄下添加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腊徙，支持箭頭函數(shù)
安裝依賴
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"]
