0%

前端项目代码格式化指南

Posted on Edited on In

Vue技术栈&配置

  • eslint + prettier + stylelint + husky
  • 步骤：
    • copy package.json===> devDependencies。完成安装后，陆续补充配置文件👇
    • 文件统一格式： LF

.eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

const typescriptEslintRecommended = require('@typescript-eslint/eslint-plugin').configs.recommended;

module.exports = {
    root: true,
    'env': {
        'browser': true,
        'es2021': true,
        'node': true,
        'commonjs': true,
    },
    'extends': [
        'eslint:recommended',
        'plugin:vue/vue3-essential',
        'plugin:prettier/recommended',
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    'overrides': [
        {
        files: ['./**/*.ts'],
        parser: '@typescript-eslint/parser',
        parserOptions: {
                sourceType: 'script',
                project: './tsconfig.json',
        },
        plugins: [ '@typescript-eslint' ],
        rules: Object.assign(typescriptEslintRecommended.rules, {
                // other customize rules
                // @Todo： 暂时设置成warn的rule，后续要设置成error
                '@typescript-eslint/no-unused-vars': 'warn',
                '@typescript-eslint/no-var-requires': 'warn',
                '@typescript-eslint/no-this-alias': ['warn'],
                '@typescript-eslint/ban-ts-comment': 'warn',
                '@typescript-eslint/no-explicit-any': 'warn'
        })
        },
        {
        'env': {
                'node': true
        },
        'files': [
                '.eslintrc.{js,cjs}'
        ],
        'parserOptions': {
                'sourceType': 'script',
        }
        }
    ],
    "parser": "vue-eslint-parser",
    'parserOptions': {
        'ecmaVersion': 'latest',
        'sourceType': 'module',
    },
    'plugins': [
        // 'html',
        'vue',
        "@typescript-eslint"
    ],
    'rules': {
        // 'indent': ['error', 'tab'],
        // 'linebreak-style': ['error', 'window'],
        // 'semi': ['error', 'always'],
        'no-underscore-dangle': 'off',
        // 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        // 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-unused-vars': 'warn',
        'vue/component-name-in-template-casing': ['warn', 'kebab-case'],
        'vue/multi-word-component-names': 'off',
        'prefer-destructuring': 'off',
        'no-plusplus': 'off',
        'vue/no-v-text-v-html-on-component': 'warn',
        'vue/no-deprecated-slot-attribute': 'warn',
        'vue/no-deprecated-v-on-native-modifier': 'warn'
    },
    globals: {
        uni: 'readonly',
        plus: 'readonly',
        getCurrentPages: 'readonly',
        getApp: 'readonly',
        this: 'readonly',
        wx: 'readonly',
        uniCloud: 'readonly'
    },
    ignorePatterns: ['./pages.json', 'uni_modules', 'unpackage'],
};

.eslintignore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
uni_modules/
node_modules/
dist/*
unpackage/
uni-*
.*.js
*.log
*.min.js
libs/
vue.config.js

# /node_modules/* in the project root is ignored by default
/node_modules/*

# build artefacts
dist/*
build/*
coverage/*

# data definition files
**/*.d.ts

# 3rd party libs
/src/public/

# custom definition files
/src/types/

apis/

.gitattributes

1
2
3
# Automatically normalize line endings (to LF) for all text-based files.
* text=auto eol=lf

.prettierrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

module.exports = {
    tabWidth: 4,
    useTabs: true,
    endOfLine: 'LF',
    singleQuote: true,
    // 行位是否使用分号，默认为true
    semi: false,
    trailingComma: 'es5',
    // 超过120字符，换行；解决html标签属性换行问题
    printWidth: 120,
    bracketSpacing: true,
    bracketSameLine: false,
    eslintIntegration: true,
    htmlWhitespaceSensitivity: 'ignore',
}

.prettierignore

1
2
3
4
5
6
7
8
9
10
11
12
# Ignore artifacts:
build
dist
coverage

# Ignore all HTML files:
*.html

.gitignore
.prettierignore
uni_modules

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "importHelpers": true,
    "allowSyntheticDefaultImports": true,
    "useDefineForClassFields": true,
    "resolveJsonModule": true,
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      "@dcloudio/types"
    ]
  },
  "exclude": [
    "node_modules",
    "unpackage",
    "src/**/*.nvue"
  ]
}

husky

安装

1
2
3
npx husky install
npx husky add .husky/pre-commit 'npm run lint';

生成的文件内容如下：

1
2
3
4
5
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint

lint-staged.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
    '*.{js,jsx,ts,tsx,vue}': ['eslint --fix', 'prettier --write'],
    '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': [
        'prettier --write--parser json',
    ],
    // for vue web proj
    'src/**/*.{js,jsx,ts,tsx,vue}': ['eslint --fix', 'prettier --write'],
    // '*.vue': ['prettier --write', 'stylelint --fix --allow-empty-input'],
    // '*.{scss,less,styl,css,html}': [
    //     'stylelint --fix --allow-empty-input',
    //     'prettier --write',
    // ],
    // 'package.json': ['prettier --write'],
    // '*.md': ['prettier --write'],
}

devDependencies

1
2
3
4
5
6
7
8
9
10
11
12
13
"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^6.5",
  "@typescript-eslint/parser": "^6.5",
  "eslint": "^8.47.0",
  "eslint-config-prettier": "^9.0.0",
  "eslint-plugin-prettier": "^5.0.0",
  "eslint-plugin-vue": "^9.17.0",
  "husky": "^8.0.3",
  "lint-staged": "^14.0.1",
  "prettier": "^3.0.2",
  "typescript": "^5.2"
}

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

{
  "scripts": {
    "lint": "lint-staged",
    "prettier": "prettier --write ./**/*.{js,json,vue}"
  },
  "husky": {
    "hooks": {
      "pre-commit": "echo start lint --fix"
    }
  },
  "dependencies": {
    "vue-inset-loader": "^1.2.6"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.5",
    "@typescript-eslint/parser": "^6.5",
    "eslint": "^8.47.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-vue": "^9.17.0",
    "husky": "^8.0.3",
    "lint-staged": "^14.0.1",
    "prettier": "^3.0.2",
    "typescript": "^5.2"
  }
}

ignore忽略配置

1
2
3
4
5
6
忽略文件
/* eslint-disable */ 

忽略某一行 & 某一个规则
/* eslint eqeqeq: "off", curly: "error" */

React技术栈&配置

待续