eslint

Next.js 内部集成了eslint开箱即用, 可以通过 next lint 命令来检查代码是否符合eslint规范。

自定义eslint配置

可能next.js默认的eslint配置不能满足你的需求，你可以通过自定义eslint配置来满足你的需求。

在项目的根目录下创建 .eslintrc.js 文件，再推荐一个eslint插件，用于排列模块导入顺序的插件，先安装：npm i eslint-plugin-simple-import-sort -D，然后配置如下：

module.exports = {
    root: true,
    extends: ['eslint:recommended', 'next/core-web-vitals'],
    plugins: ['simple-import-sort'],
    rules: {
        'max-len': ['error', {code: 120}], // 允许一行最大的长度

        // 缩进
        indent: [2, 4],

        // 引号
        quotes: [2, 'single'],

        'arrow-parens': ['error', 'as-needed'], // 剪头函数一个参数时不需要圆括号

        // 对象属性引号
        'quote-props': [2, 'as-needed'],

        // 对象最后一项不加,
        'comma-dangle': [2, 'never'],

        // 末尾加;
        semi: ['error', 'always'],

        // 行不允许空格
        'no-trailing-spaces': [2],

        // 大括号空格
        'object-curly-spacing': [2, 'never'],

        'object-curly-newline': [2,  {consistent: true}], // 对象头尾是否换行

        'object-property-newline': [2, {allowAllPropertiesOnSameLine: true}], // 对象属性是否折行，动态适应

        'key-spacing': ['error', {afterColon: true}], // 冒号后留空格

        'comma-spacing': ['error', {after: true}], // 逗号后留空格

        // 文件结尾空行
        'eol-last': [2, 'always'],

        // 空行的数量
        'no-multiple-empty-lines': [2, {max: 2, maxEOF: 1}],

        'no-case-declarations': [0],

        'keyword-spacing': [2],

        'no-shadow': [2], // 重复定义

        'no-redeclare': [2],

        'no-empty': [2, {allowEmptyCatch: true}],

        'no-unused-vars': [2],

        // 针对import排序
        'simple-import-sort/imports': [1, {
            groups: [['^node:', '^[a-zA-Z]', '^@[a-zA-Z]', '^@\\/', '^\\/', '^\\.', '^\\u0000']]
        }],

        'simple-import-sort/exports': [1]
    }
};

如果你是vscode用户，可以安装插件 ESLint 插件，并配置自动修复以提高开发效率，在 .vscode 文件夹下创建 settings.json 文件，内容如下：

{
    /* ------------------------- eslint ------------------------- */
    "editor.codeActionsOnSave": {
        "source.fixAll": "explicit"
    },
    // eslint工作目录
    "eslint.workingDirectories": [
        ".eslintrc.js",
        ".eslintrc.cjs",
        ".eslintignore"
    ],
    /* ------------------------- 允许json注释 ------------------------- */
    "files.associations": {
        "*.json": "jsonc"
    },
    /* ------------------------- typescript ------------------------- */
    "typescript.tsdk": "node_modules/typescript/lib",
    "typescript.enablePromptUseWorkspaceTsdk": true, // 启用使用工作区的ts版本
    "workbench.tree.enableStickyScroll": true // 新版vscode树形结构滚动条固定
}

eslint

自定义eslint配置​

自定义eslint配置