使用 ESlint+stylelint+prettier 对前端项目代码进行规范

eslint-stylelint-prettier
| —— src                //项目代码存放文件夹
| —— .editorconfig      //编辑器配置文件
| —— .eslintignore      //eslint忽略配置文件
| —— .eslintrc.js       //eslint配置文件
| —— .gitignore         //git忽略配置文件
| —— .prettierrc.js     //prettiter配置文件
| —— .stylelintignore   //stylelint忽略配置文件
| —— .stylelintrc.js    //stylelint配置文件
| —— package.json       //项目包依赖及其他相关配置文件
| —— README.md          //readme文件

 module.exports ={
    env: {},
    extends: [],
    plugins: [],
    parse: ''parserOptions: {},
    globals: {},
    rules: {},
    settings: {}
}

env: {
    browser: true,  //浏览器环境
    node: true,     //node环境
    es6: true,      //es6 环境
},

extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended','plugin:jsdoc/recommended',
'prettier'
],

plugins: [
    'jsdoc',
    'react',
    'jsx-a11y',
    'import',
    'prettier',
    '@typescript-eslint'],

parserOptions: {
    node: true,
    ecmaVersion: 11,
    sourceType: 'module',
    ecmaFeatures: {
        jsx: true}
},

parser: '@typescript-eslint/parser', //定义ESLint的解析器

globals: {
    it: 'writable',
    Context: 'writable',
    Next: 'writable',
    wx: 'readonly',
},

rules: {
    // https://eslint.bootcss.com/docs/rules/基本规则参考文档地址
    'no-console': 'off', 　　　　　　　　　　　　　　 //允许使用 console
    radix: 'off', 　　　　　　　　　　　　　　　　　　 //parseInt方法不强制使用第二个参数
    'linebreak-style': ['error', 'unix'], 　　　　//强制使用Linux的LF换行符
    'guard-for-in': 'off', 　　　　　　　　　　　　  //关闭要求 for-in 循环中有一个 if 语句
    'no-return-await': 'off', 　　　　　　　　　　　//允许直接返回 await 结果
    'prefer-promise-reject-errors': 'off',　　　　// 不求使用 Error 对象作为 Promise 拒绝的原因
    'no-continue': 'off', 　　　　　　　　　　　　　//允许使用 continue
    'spaced-comment': ['error', 'always'], 　　 //注释必须有空格
    'no-restricted-syntax': [　　　　　　　　　　　// 不允许使用的语法
        'error',
        {
            selector: 'ForOfStatement',
            message: '不允许使用 for of  语法',
        },
        {
            selector: 'LabeledStatement',
            message: 'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.',
        },
        {
            selector: 'WithStatement',
            message: '不允许使用 with 语法',
        },
    ],
    'new-cap': 'error', 　　//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
camelcase: [
        'warn',
        {
            //强制使用骆驼拼写法命名约定
            properties: 'always',
        },
    ],
    'max-params': ['error', 4], 　　　　　　　　//函数最多四个参数
    'no-underscore-dangle': 'off', 　　　　　　// 标识符可以_开头或结尾
    'no-nested-ternary': 'error', 　　　　　　　//禁止使用嵌套的三元表达式,避免代码难以理解
    'no-useless-constructor': 'error', 　　　　//关闭禁止不必要的构造函数
    'no-plusplus': 'off', 　　　　　　　　　　　　//关闭禁止使用++，--
    'no-unreachable': 'error', 　　　　　　　　//禁止有不能执行的代码
    'no-control-regex': 'off', 　　　　　　　　//关闭禁止在正则表达式中使用控制字符
    'class-methods-use-this': 'off', 　　　　//关闭强制类方法使用 this
    'no-use-before-define': 'off', 　　　　　//关闭未定义前不能使用
    'no-shadow': 'error', 　　　　　　　　　　//关闭外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
    'no-extra-semi': 'error', 　　　　　　　　//禁止多余的分号
    eqeqeq: ['error', 'always'], 　　　　　　//要求使用 === 和 !==
    'jsx-quotes': ['error', 'prefer-double'], //强制在 JSX 属性中一致地使用双引号

    //相关文档地址：https://www.npmjs.com/package/eslint-plugin-reactreactEsllint配置参考地址
    'react/no-multi-comp': [
        'error',
        {
            //禁止单个文件有多个组件定义, 允许多个无状态组件
            ignoreStateless: true,
        },
    ],
    'react/no-array-index-key': 'warn', //禁止使用数据索引作为元素的key值
    'react/jsx-pascal-case': ['error'], //为用户定义的 JSX 组件强制使用 PascalCase
    'react/no-unknown-property': [
        'error',
        {
            //禁止使用未知的DOM属性
            ignore: ['crossOrigin'],
        },
    ],
    'react/jsx-filename-extension': [
        'error',
        {
            //限制可能包含JSX的文件扩展名
            extensions: ['.tsx', '.jsx', '.js'],
        },
    ],
    'react/prop-types': 'error', 　　　　　　　　　　//防止React组件定义中缺少道具验证
    'react/static-property-placement': 'off', 　　//不限制静态属性书写位置
    'react/destructuring-assignment': 'off', 　　//关闭执行支持、状态和上下文的解构赋值的一致使用,
    'react/prefer-stateless-function': 'off', 　　//关闭强制将无状态组件编写为纯函数,

    //相关文档地址：https://www.npmjs.com/package/eslint-plugin-import
    'import/no-unresolved': [
        'error',
        {
            //没有找到对应模块不报错
            ignore: ['(png|jpg|jpeg|gif|svg)$'],
        },
    ],
    'import/extensions': [
        //允许导入的文件省略后缀
        'error',
        'ignorePackages',
        {
            js: 'never',
            mjs: 'never',
            jsx: 'never',
            ts: 'never',
            tsx: 'never',
        },
    ],
    'import/prefer-default-export': 'off', //关闭单个导出时必须使用默认导出

    //相关文档地址：https://www.npmjs.com/package/eslint-plugin-jsx-a11y
    'jsx-a11y/alt-text': 'error', //强制要求可选文本的所有元素都具有有意义的信息，以便传回给最终用户。
    'jsx-a11y/click-events-have-key-events': 'off', //关闭强制一个可单击的非交互元素至少有一个键盘事件监听器。
    'jsx-a11y/no-static-element-interactions': 'off', //关闭强制要求有交互操作的静态标签设置role属性
    'jsx-a11y/no-noninteractive-element-interactions': 'off', //关闭强制要求非交互语义标签(main,hX,ul,ol,liarea)不包含交互事件(onClick等)

    //相关文档地址：https://www.npmjs.com/package/@typescript-eslint/eslint-plugin
    '@typescript-eslint/no-unused-vars': 'error', 　　　　　　　　　　//不允许未使用的变量
    '@typescript-eslint/explicit-member-accessibility': 'off', 　　//关闭要求类属性和方法上的显式可访问性修饰符
    '@typescript-eslint/no-object-literal-type-assertion': 'off', //关闭禁止对象字面值出现在类型断言表达式中(来自TSLint的no-object-literal-type-assertion)
    '@typescript-eslint/explicit-function-return-type': 'off', 　　//关闭要求函数和类方法的显式返回类型
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off', //关闭在导出的函数和类的公共类方法上要求显式的返回和参数类型
    '@typescript-eslint/no-use-before-define': ['error'], 　　　　//禁止在定义变量之前使用变量
    '@typescript-eslint/no-shadow': ['error'], 　　　　　　　　　　//禁止变量声明隐藏在外部作用域中声明的变量
    '@typescript-eslint/no-var-requires': 0, 　　　　　　　　　　　　//除了在import语句中，禁止使用require语句

    //注释规则 https://www.npmjs.com/package/eslint-plugin-jsdoc
    'jsdoc/require-jsdoc': [
        'error',
        {
            contexts: [
                //排除一些常用声明周期函数
                'MethodDefinition:not([key.name="componentDidMount"]):not([key.name="render"]):not([key.name="constructor"]):not([key.name="componentDidUpdate"]):not([key.name="shouldComponentUpdate"])',
            ],
            require: {
                FunctionDeclaration: true,
                ClassDeclaration: true, //类及其方法注释
                ArrowFunctionExpression: true, //箭头函数也需要注释
                ClassExpression: true,
                FunctionExpression: true, //普通函数注释
},
        },
    ],
    'jsdoc/check-tag-names': [
        'error',
        {
            //防止与 prettier 冲突
            definedTags: ['format'],
        },
    ],
    'jsdoc/require-param': 'error',
    'jsdoc/require-param-description': 'error', // 函数参数描述
    'jsdoc/require-param-name': 'error',　　　// 参数名字
    'jsdoc/require-param-type': 'error', 　　//函数的类型
    'jsdoc/require-returns': 'error', 　　//函数的返回值
    'jsdoc/require-description': 'error',　　// 所有功能都要有描述
    'prettier/prettier': ['error'],　　　　// 应用 prettier
},

settings: {
    'import/resolver': {
        node: {
            extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
        },
    },
    'import/extensions': ['.js', '.ts', '.mjs', '.jsx', '.tsx'],
    jsdoc: {
        structuredTags: {
            format: {
                type: false,
            },
        },
    },
}

"dependencies": {
    "@typescript-eslint/eslint-plugin": "^4.31.0",
    "@typescript-eslint/parser": "^4.31.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsdoc": "^36.1.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.25.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.4.0",
    "typescript": "^4.4.2"}

module.exports ={
    printWidth: 120, 　　　　　　　　//一行的最大字符数
    semi: true, 　　　　　　　　　　//是否使用分号
    singleQuote: true, 　　　　　　//是否使用单引号
    trailingComma: 'all', 　　　　//末尾逗号在可能的地方都加上逗号
    bracketSpacing: true, 　　　　//字面量对象括号中的空格开始和结束不需要
    jsxBracketSameLine: true, 　　//jsx元素结束放在最后一行结束
    arrowParens: 'always', 　　　　//箭头函数中的括号在需要的时候添加
    insertPragma: true, 　　　　　　//添加头注释 @format 表示已经被prettier格式化过
    tabWidth: 2, 　　　　　　　　　　//tab宽度
    useTabs: true, 　　　　　　　　//使用tab缩进
    eslintIntegration: true,  　　//eslint 规则优先防止冲突
};

module.exports ={
    extends: ['stylelint-config-prettier', 'stylelint-config-recess-order', 'stylelint-config-standard'],
    plugins: ['stylelint-prettier', 'stylelint-order'],
    rules: {
        indentation: 2,
        'order/properties-order': ['never'],
        'max-nesting-depth': 4,
    },
};

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "prepare": "husky install",
    "checkEslint": "node checkEslint.js",
    "stylelintfix": "stylelint --config .stylelintrc.js **/*.{css,sass,scss,less} --fix",
    "lint": "eslint src koa --ext .js,.jsx,.ts,.tsx --cache --fix"},

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run checkEslint

/** @format */

const shell = require('shelljs');

let pass = 0;
//检查是否有安装 git
if (!shell.which('git')) {
    shell.echo('Sorry, this script requires git');
    shell.exit(1);
}
//获取暂存区的所有文件名，过滤掉删除的文件
const res = shell.exec('git diff --cached --diff-filter=d --name-only');
//筛选出需要的文件
const fileList = res.grep('.*.(js|jsx|ts|tsx|css|less|scss|sass)$').split('');
const styleArr = [], scriptArr =[];
//将所有文件分为 样式文件和脚本文件
fileList.forEach(file =>{
    if(/.(less|css|scss|sass)$/.test(file)){
        styleArr.push(file);
    }
    if(/.(js|jsx|ts|tsx)$/.test(file)) {
        scriptArr.push(file);
    }
});

//如果有样式文件则进行 stylelint 校验
if(styleArr.length) {
    const script = styleArr.length === 1 ?styleArr.join() : `{${styleArr.join()}}`;
    const styleError = shell.exec(`stylelint --config .stylelintrc.js ${script}`);
    if(styleError.stdout) {
        pass = 1;
    }
}

//如果有脚本文件则进行 eslint 校验
if(scriptArr.length) {
    const script = scriptArr.length === 1 ?scriptArr.join() : `{${scriptArr.join()}}`;
    const scriptError = shell.exec(`eslint --config .eslintrc.js ${script}`);
    if(scriptError.stdout) {
        pass = 1;
    }
}

console.log(styleArr, scriptArr);
//如果校验不通过则退出程序
if(pass) {
    shell.exit(1);
}

git commit -m 'test' --no-verify

root = true[*]
charset = utf-8indent_style =tab
indent_size = 2end_of_line =lf
insert_final_newline = truetrim_trailing_whitespace = true

git config --global core.autocrlf input

const eslintConfig = require('./src/index');
module.exports = eslintConfig;

const stylelintConfig = require('./src/stylelintConfig');
module.exports = stylelintConfig;

const prettierConfig = require('./src/prettierConfig');
module.exports = prettierConfig;

{
  "extends": "eslint-stylelint-prettier"}