- 使用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"]