0
# @vue/eslint-config-standard
1

2
ESLint Shareable Configuration for JavaScript Standard Style in Vue.js Projects
3

4
## Package Information
5

6
- **Package Name**: @vue/eslint-config-standard
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm add --dev @vue/eslint-config-standard`
10

11
## Core Imports
12

13
```javascript
14
import standard from "@vue/eslint-config-standard";
15
```
16

17
## Basic Usage
18

19
```javascript
20
import pluginVue from "eslint-plugin-vue";
21
import standard from "@vue/eslint-config-standard";
22

23
export default [
24
  ...pluginVue.configs["flat/essential"],
25
  ...standard,
26
]
27
```
28

29
## Architecture
30

31
This ESLint configuration provides a comprehensive JavaScript Standard Style setup specifically tailored for Vue.js projects. It uses ESLint's modern flat configuration format and integrates multiple specialized rule sets through a deep merge system:
32

33
- **Upstream Rules**: Core JavaScript Standard Style rules from the original eslint-config-standard
34
- **Stylistic Integration**: Seamless integration with @stylistic/eslint-plugin for consistent code formatting
35
- **Vue Template Support**: Extension of JavaScript rules to Vue.js template expressions
36
- **Import Resolution**: Advanced path alias resolution through eslint-import-resolver-next
37

38
The configuration automatically handles rule conflicts and provides a unified experience across JavaScript code and Vue.js templates.
39

40
## Main Configuration
41

42
### ESLint Configuration Array
43

44
```javascript { .api }
45
export default: ESLintConfig[]
46
```
47

48
The main export is an array containing a single merged ESLint configuration object. This configuration combines all rule sets and settings into a cohesive Standard Style setup for Vue.js projects.
49

50
**Usage Example:**
51
```javascript
52
import standard from "@vue/eslint-config-standard";
53

54
// standard is an array of ESLint configuration objects
55
console.log(standard.length); // 1
56
console.log(standard[0].name); // "vue-standard"
57
```
58

59
**Configuration Object Properties:**
60
- `name`: "vue-standard" - Configuration identifier
61
- `languageOptions`: ECMAScript 2022, module format, JSX support
62
- `plugins`: Integrated ESLint plugins (n, promise, import-x, @stylistic)
63
- `rules`: Complete JavaScript Standard Style rule set (290+ rules including plugin rules)
64
- `settings`: Import resolver configuration with path alias support
65

66
## Rule Categories
67

68
### Core JavaScript Rules
69

70
The configuration includes 220+ JavaScript Standard Style rules covering:
71

72
- **Code Quality**: `no-unused-vars`, `no-undef`, `prefer-const`
73
- **Formatting**: `indent`, `quotes`, `semi`, `comma-dangle`
74
- **Best Practices**: `eqeqeq`, `no-eval`, `no-with`
75
- **ES6+**: `arrow-spacing`, `template-curly-spacing`, `rest-spread-spacing`
76

77
### Plugin-Specific Rules
78

79
**Import Rules (import-x plugin):**
80
- `import-x/export`: Ensure named exports exist
81
- `import-x/first`: Ensure imports come first
82
- `import-x/no-duplicates`: Prevent duplicate imports
83

84
**Node.js Rules (n plugin):**
85
- `n/handle-callback-err`: Require error handling in callbacks
86
- `n/no-deprecated-api`: Prevent usage of deprecated Node.js APIs
87
- `n/process-exit-as-throw`: Treat process.exit() as throw
88

89
**Promise Rules (promise plugin):**
90
- `promise/param-names`: Enforce consistent parameter names in Promise constructors
91

92
**Stylistic Rules (@stylistic plugin):**
93
- Automatically replaces core ESLint formatting rules with @stylistic equivalents
94
- Provides enhanced formatting capabilities while maintaining Standard Style compliance
95

96
### Vue Template Rules
97

98
JavaScript Standard Style rules are automatically extended to Vue.js template expressions:
99
- `vue/indent`: Template indentation matching JavaScript style
100
- `vue/quotes`: Consistent quote usage in templates
101
- `vue/comma-dangle`: Template expression comma handling
102

103
## Language Options
104

105
```typescript { .api }
106
interface LanguageOptions {
107
  ecmaVersion: 2022;
108
  sourceType: "module";
109
  parserOptions: {
110
    ecmaFeatures: {
111
      jsx: true;
112
    };
113
  };
114
  globals: GlobalsConfig;
115
}
116
```
117

118
**Global Variables:**
119
- ES2021 globals (`globalThis`, `WeakRef`, etc.)
120
- Node.js globals (`process`, `Buffer`, `__dirname`, etc.)
121
- Browser globals (`document`, `navigator`, `window`)
122

123
## Plugin Integration
124

125
### Required Peer Dependencies
126

127
```javascript { .api }
128
interface PeerDependencies {
129
  eslint: "^9.10.0";
130
  "eslint-plugin-vue": "^9.28.0 || ^10.0.0";
131
}
132
```
133

134
### Integrated Dependencies
135

136
The configuration automatically includes these plugins:
137

138
```javascript { .api }
139
interface IntegratedPlugins {
140
  "@stylistic/eslint-plugin": "^4.2.0";
141
  "eslint-import-resolver-next": "^0.4.2";
142
  "eslint-plugin-import-x": "^4.6.1";
143
  "eslint-plugin-n": "^17.16.2";
144
  "eslint-plugin-promise": "^7.2.1";
145
  "globals": "^16.0.0";
146
}
147
```
148

149
## Import Resolution
150

151
### Path Alias Support
152

153
The configuration uses `eslint-import-resolver-next` to automatically resolve:
154
- TypeScript path mappings from `tsconfig.json`
155
- JavaScript path mappings from `jsconfig.json`
156
- Standard Node.js module resolution
157

158
```javascript { .api }
159
interface ResolverSettings {
160
  "import-x/resolver-next": [
161
    NodeResolver,
162
    NextImportResolver
163
  ];
164
}
165
```
166

167
### Configuration for Path Aliases
168

169
To enable import resolution for path aliases:
170

171
1. Configure aliases in `tsconfig.json`:
172
```json
173
{
174
  "compilerOptions": {
175
    "baseUrl": ".",
176
    "paths": {
177
      "@/*": ["src/*"],
178
      "~/*": ["lib/*"]
179
    }
180
  }
181
}
182
```
183

184
2. Or in `jsconfig.json` for JavaScript projects:
185
```json
186
{
187
  "compilerOptions": {
188
    "baseUrl": ".",
189
    "paths": {
190
      "@/*": ["src/*"]
191
    }
192
  }
193
}
194
```
195

196
The resolver will automatically detect and use these configurations.
197

198
## Advanced Configuration
199

200
### Extending the Configuration
201

202
```javascript
203
import pluginVue from "eslint-plugin-vue";
204
import standard from "@vue/eslint-config-standard";
205

206
export default [
207
  ...pluginVue.configs["flat/essential"],
208
  ...standard,
209
  {
210
    // Override or add rules
211
    rules: {
212
      'import-x/extensions': ['error', 'ignorePackages'],
213
      'vue/max-attributes-per-line': ['error', { singleline: 3 }]
214
    }
215
  }
216
]
217
```
218

219
### File Pattern Targeting
220

221
```javascript
222
export default [
223
  {
224
    files: ['**/*.{js,mjs,jsx,vue}']
225
  },
226
  ...pluginVue.configs['flat/essential'],
227
  ...standard
228
]
229
```
230

231
## Compatibility
232

233
### ESLint Version Support
234
- **Minimum**: ESLint 9.10.0
235
- **Format**: Flat Configuration only (no legacy .eslintrc support)
236

237
### Vue.js Version Support
238
- Compatible with Vue.js 2.x and 3.x projects
239
- Requires `eslint-plugin-vue` version 9.28.0 or higher
240

241
### Environment Support
242
- **Node.js**: 18+ (ES2022 support required)
243
- **Browsers**: Modern browsers with ES2021 support
244
- **Build Tools**: Vite, Webpack, Rollup compatible
245

246
## Migration Notes
247

248
### From Legacy .eslintrc Format
249

250
This configuration requires ESLint's flat configuration format. For legacy `.eslintrc` support, use version `^13.0.0`:
251

252
```bash
253
npm install @vue/eslint-config-standard@^13.0.0
254
```
255

256
### From Other Standard Configs
257

258
When migrating from other JavaScript Standard Style configurations:
259

260
1. Remove conflicting ESLint configurations
261
2. Ensure `eslint-plugin-vue` is properly configured
262
3. Update ESLint to version 9.10.0 or higher
263
4. Adopt flat configuration format