前端代码规范（配置篇）

基于 Airbnb 前端规范

CSS

规范

https://github.com/airbnb/css

stylelint

https://stylelint.io

安装

yarn add -D stylelint stylelint-scss stylelint-order stylelint-config-airbnb

配置

// .stylelintrc
{
  "extends": "stylelint-config-airbnb"
}

---

JavaScript

规范

https://github.com/airbnb/javascript

eslint

https://eslint.org

安装

npm info "eslint-config-airbnb-base@latest" peerDependencies

// 输出信息
// { eslint: '^5.16.0 || ^6.8.0',
//   'eslint-plugin-import': '^2.20.1' }

// 按照输出信息，安装指定依赖
yarn add -D eslint-config-airbnb-base eslint@6.8.0 eslint-plugin-import@2.20.1

配置

// .eslintrc
{
  "extends": "airbnb-base"
}

---

检查代码

基础

// package.json
"scripts": {
    "lint": "eslint ./src/**/*.js --fix && stylelint ./src/**/*.css --fix"
}

Vue CLI

// package.json
// 由于 vue-cli-service lint 与 webpack 无关，无法使用 stylelint-webpack-plugin 插件，需要手动添加脚本
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint && stylelint ./src/**/*.{html,css,sass,scss,vue} --fix"
},

// vue.config.js
const StylelintPlugin = require('stylelint-webpack-plugin');
module.exports = {
    configureWebpack: {
        plugins: [
            new StylelintPlugin({
                files: './src/**/*.{html,css,sass,scss,vue}',
                fix: true,
            }),
        ],
    },
};