# JavaScript 代码风格

# eslint

{
  "eslint": "^5.16.0",
  "eslint-config-standard": "^6.2.1",
  "eslint-friendly-formatter": "^2.0.7",
  "eslint-loader": "^2.1.2",
  "eslint-plugin-html": "^2.0.1",
  "eslint-plugin-promise": "^3.5.0",
  "eslint-plugin-standard": "^2.3.1",
  "eslint-plugin-vue": "^5.0.0"
}
1
2
3
4
5
6
7
8
9
10

使用两个插件

  • plugin:vue/essential
  • standard

vue/essential 为了在 vue 里面也可以生效。 standard 是代码规范 细则 (opens new window)

# prettier

配置文件:

{
  "printWidth": 150,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "proseWrap": "preserve",
  "overrides": [
    {
      "files": [
        "*.json",
        ".eslintrc",
        ".tslintrc",
        ".prettierrc",
        ".tern-project"
      ],
      "options": { "parser": "json", "tabWidth": 2 }
    },
    {
      "files": "*.{css,sass,scss,less}",
      "options": { "parser": "css", "tabWidth": 2 }
    },
    { "files": "*.ts", "options": { "parser": "typescript" } },
    { "files": "*.vue", "options": { "parser": "vue" } },
    { "files": "*.md", "options": { "parser": "markdown" } }
  ]
}
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

开启 vscode 自动格式化

{
  // prettier
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.tabWidth": 2,
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
1
2
3
4
5
6
7
8
9
10