沐光

记录在前端之路的点点滴滴

Vue 代码规范配置

更新于 分类于 Valine： 本文字数： 422 阅读时长 ≈ 1 分钟

前言

工欲善其事，必先利其器。一个好的规范能使的团队开发的效率提升一倍，因此，一个好的规范对于一个团队来说是必不可少的。此处记录我为所在团队维护的一套前端规范相关的配置。

推荐阅读：Mac 环境配置 的 “配置 VScode” 部分，通过 Sync 安装我总结的插件可不用关心以下的配置，默认配置好。

VSCode 配置

在项目根目录下新建一个 .vscode 文件夹，然后在该文件内创建一个 settings.json 文件，粘贴以下内容即可：

注意：该部分配置需要安装两个必须的 VSCode 插件： Vetur 和 ESLint。

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
{
  // 编辑器部分
  "editor.tabSize": 2,
  "editor.fontSize": 15,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.renderWhitespace": "none",
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.defaultFormatter": "octref.vetur",
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "files.insertFinalNewline": true,
  /**
   * 代码配置
   */
  // eslint 部分
  "eslint.run": "onSave",
  "eslint.validate": ["typescriptreact", "typescript"],
  // vetur 部分
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.ts": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 75,
      "singleQuote": false
    }
  }
}

ESlint 配置

此处配置的 ESlint 为 TS 环境下的 typescript-eslint 的配置。配置文件为：.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
module.exports = {
  root: true,
  env: {
    browser: true,
    commonjs: true,
    es6: true,
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  extends: ['plugin:vue/essential', '@vue/standard', '@vue/typescript'],
  rules: {
    'no-var': 'error',
    'arrow-parens': 'off',
    semi: 'off',
    '@typescript-eslint/semi': ['error'],
    'eol-last': 'off',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        vars: 'local',
        args: 'none',
        ignoreRestSiblings: true,
      },
    ],
    'generator-star-spacing': 'off',
    camelcase: ['error', { properties: 'never' }],
    'space-before-function-paren': [
      'error',
      { anonymous: 'always', named: 'never' },
    ],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
};

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "checkJs": false,
    "esModuleInterop": true,
    "importHelpers": true,
    "experimentalDecorators": true,
    "jsx": "preserve",
    "jsxFactory": "h",
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "pretty": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext",
    "types": [
      "webpack-env"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "public"
  ]
}

相关依赖（项目由非 TS -> TS）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.0.5",
    "@vue/cli-plugin-typescript": "^3.8.1",
    "@vue/cli-service": "^3.0.5",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "typescript": "^3.4.3"
  }
}

Stylelint 配置

此部分规范 css 和 less 语法，配置文件为： stylelint.config.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
  extends: 'stylelint-config-standard',
  ignoreFiles: ['**/*.js', '**/*.md', '**/*.png', '**/*.json'],
  rules: {
    indentation: 2,
    'color-hex-case': 'lower',
    'string-quotes': 'single',
    'color-hex-length': 'long',
    'number-leading-zero': 'never',
    'rule-empty-line-before': null,
    'no-descending-specificity': null,
    'no-missing-end-of-source-newline': false,
    'selector-pseudo-element-colon-notation': null,
    'selector-list-comma-newline-after': 'always-multi-line',
  },
};

相关依赖：

1
2
3
4
5
6
{
  "devDependencies": {
    "stylelint": "^10.1.0",
    "stylelint-config-standard": "^18.3.0"
  }
}

规范参考