vscode的settings.json配置成符合前端阿里代码规范的配置,应该怎么配?
时间: 2024-12-11 17:35:40 浏览: 83
要在Visual Studio Code (VSCode) 中设置符合阿里巴巴前端代码规范,你需要在 `.vscode/settings.json` 文件中加入 Alibaba Coding Style 的相关插件配置。以下是一个基本的配置示例,主要关注 JavaScript 和 TypeScript 的配置:
```json
{
"editor.detectIndentation": false, // 关闭自动检测缩进,通常推荐使用2个空格
"editor.formatOnSave": true, // 每次保存自动格式化
"vetur.format.defaultFormatter.js": "vscode-prettier", // 使用Prettier进行格式化
"vetur.format.defaultFormatter.ts": "vscode-typescript",
"prettier.configPath": "./prettier.config.js", // 引入自定义Prettier配置文件
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
], // 开启ESLint验证
"eslint.autoFixOnSave": true, // 自动修复错误
"eslint.extentions.enabled": [
"js",
"jsx",
"ts",
"tsx"
], // 允许ESLint检查指定的文件扩展
// 阿里巴巴前端编码规范配置
"prettier.printWidth": 120, // 单行字符数最大值
"prettier.tabWidth": 2, // 缩进宽度
"prettier.trailingCommas": "all", // 列表项最后一个元素后的逗号
"prettier.arrowParens": "always", // 函数箭头总是带圆括号
"prettier.singleQuote": true, // 使用单引号
"prettier.jsxBracketSameLine": false, // JSX标签不换行
"prettier.proseWrap": "none", // 不换行文本
"prettier.trailingComma": "all", // 结尾逗号
"prettier.trailingFunctionCommas": "all", // 函数末尾逗号
"prettier.array-bracket-newline": "consistent", // 数组方括号内元素换行规则
"prettier.object-curly-newline": "consistent", // 对象大括号内换行规则
"prettier.importSortOrder": "descending-declaring", // 按照声明位置排序导入
"prettier.vueIndentScriptAndStyle": 2, // Vue组件script和style块的缩进
"eslint.rules": {
// 阿里巴巴规则集,例如:
"brace-style": ["error", "stroustrup"], // 推荐的花括号风格
"comma-dangle": ["error", "never"], // 禁止省略尾逗号
"no-unused-vars": ["error", { "argsIgnorePattern": "^_+" }] // 忽略未使用的局部变量,除了以 "_" 开始的
}
}
```
这个配置设置了Prettier 和 ESLint 都按照阿里巴巴的标准格式进行,包括但不限于单引号、代码行宽、数组和对象的换行规则等。请注意,实际的规则集可能会根据阿里巴巴最新的指南有所变化,建议查看其官方文档以获取最准确的配置。
阅读全文
相关推荐


















