规范代码,提升开发效率,5大绝招解决你的痛点

  1. 使用eslint规范检测

一般在团队开发中每个人的代码习惯都不太一样,这样就会导致代码风格不一致,以致于维护和修改bug的时候看别人的代码灰常痛苦。使用eslint规范代码,统一代码风格。

  1. 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"
  ],
  1. 配置路径别名

模块化开发项目中,比如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';
  1. 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"]

你可能感兴趣的:(规范代码,提升开发效率,5大绝招解决你的痛点)