前端代码规范应用

目录

规范

css规范

js规范

---

以下针对vue-cli举例

css规范

需求：对于些css样式处理

1. 属性位置
2. 换行
3. 等等

stylelint

项目引入

1. Use npm to install stylelint and its standard configuration:

npm install --save-dev stylelint stylelint-config-standard

2. Create a .stylelintrc.json configuration file in the root of your project:

{
  "extends": "stylelint-config-standard"
}

项目中webpack使用

1.手动使用

npx stylelint "**/*.css"
npx stylelint "**/*.less"

2.webpack编译运行时使用(stylelint-webpack-plugin)

webpack.config.js

const path = require('path');

const StyleLintPlugin = require('stylelint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'index.js'
    },
    module: {
        rules: [{
            test: /\.less$/,
            use: ExtractTextWebpackPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'less-loader']
            })
        }]
    },
    plugins: [
        new ExtractTextWebpackPlugin('index.css'),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html'
        }),
        new StyleLintPlugin({
            context: "src",
            configFile: path.resolve(__dirname, './stylelint.config.js'),
            files: '**/*.less',
            failOnError: false,
            quiet: true,
            syntax: 'less'
        })//会在webpack编译时检测
    ]
};

vue.config.js

const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
  configureWebpack: {
    plugins: [
      new StyleLintPlugin({
        files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
        fix: false, // 是否自动修复
        cache: true, // 是否缓存
        emitErrors: true,
        failOnError: false
      })
    ]
  }
};

项目中vscode使用

保存自动格式化

1. 下载vs的stylelint插件
2. 配置首选项setting

{
"editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    }    
}

js规范 (Prettier 格式化代码，使用 linters 捕获错误)

ESlint：只能用于提示报错信息，无法用于对代码格式化。

注意使用的路径。是本地项目配置还是node_modules

针对项目可以添加.eslintrc.js 以下两者都使用该配置

项目中添加使用（启动时报错）

安装依赖

npm i eslint  @vue/cli-plugin-eslint @vue/eslint-config-airbnb --save-dev

编译器中使用（编译器报错）

下载eslint插件,注意右下角需要启动eslint

//plugin:vue/essential支持对vue的eslint检查
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/airbnb'],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  }
};

项目编译启动时会进行报错

prettier：用于对代码格式化，注意使用的路径。

是本地项目配置还是node_modules

编译器插件：prettier可以对代码进行格式化

首选项 => 设置默认ctrl+s所使用的保存格式化插件

  {
        "editor.formatOnSave": true,
        "[javascript]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
    }

针对项目配置.prettierrc

{
  "printWidth": 200,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

用于开发过程中对代码格式化