1. 电脑系统 windows10 专业版
2. 在应用 vs code 开发的过程中, 咱们总是会应用到一些格式化工具, 在这里我应用的是 es lint, 上面我来分享一下 vs code 应用 es lint 主动格式化代码, 心愿对你有所帮忙。
3.es lint 和 ts lint 区别?
ESLint 是用于辨认和报告 ECMAScript/JavaScript 代码中的模式的工具。
TSLint 是可扩大的动态剖析工具,用于查看 TypeScript 代码的可读性,可维护性和功能性谬误。
4. 应用 es lint 还是 ts lint?
从下面的 ESLint 的定义中能够看到,ESLint 反对 ECMAScript 和 JavaScript,而 TSLint 仅反对 TypeScript。因而,TSLint 官网曾经于 2019 年放弃了 TSLint,转而呐喊开发者们应用 ESLint 作为代替。
4-1. 应用 vs code 装置 es lint
5. 在 vs code 中找到设置
// 增加如下代码
{
// vscode 默认启用了依据文件类型主动设置 tabsize 的选项
"editor.detectIndentation": false,
// 从新设定 tabsize
"editor.tabSize": 2,
// #每次保留的时候主动格式化
"editor.formatOnSave": true,
// #每次保留的时候将代码按 eslint 格局进行修复
"eslint.autoFixOnSave": true,
// 增加 vue 反对
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #让 prettier 应用 eslint 的代码格局进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #应用带引号代替双引号
"prettier.singleQuote": true,
// #让函数 (名) 和前面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户本身习惯抉择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让 vue 中的 js 按编辑器自带的 ts 格局进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue 组件中 html 代码格式化款式
}
},
// 格式化 stylus, 需装置 Manta's Stylus Supremacy 插件"stylusSupremacy.insertColons": false, // 是否插入冒号"stylusSupremacy.insertSemicolons": false, // 是否插入分好"stylusSupremacy.insertBraces": false, // 是否插入大括号"stylusSupremacy.insertNewLineAroundImports": false, // import 之后是否换行"stylusSupremacy.insertNewLineAroundBlocks": false,"editor.suggestSelection":"first","vsintellicode.modify.editor.suggestSelection":"automaticallyOverrodeDefaultValue","editor.codeActionsOnSave": {"source.fixAll.eslint": true} // 两个选择器中是否换行
}
6. 集体配置
{
// 每次保留的时候主动格式化
"editor.formatOnSave": true,
// 敞开默认的 tabsize 的大小
"editor.detectIndentation": false,
// 从新设定 tabSize
"editor.tabSize": 1,
"editor.fontSize": 20,
// 每次保留的时候将代码按 eslint 格局进行修
// #每次保留的时候将代码按 eslint 格局进行修复
"eslint.autoFixOnSave": true,
// 增加 vue 反对
// #让 prettier 应用 eslint 的代码格局进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #应用带引号代替双引号
"prettier.singleQuote": true,
// #让函数 (名) 和前面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户本身习惯抉择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让 vue 中的 js 按编辑器自带的 ts 格局进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue 组件中 html 代码格式化款式
}
},
// 格式化 stylus, 需装置 Manta's Stylus Supremacy 插件"stylusSupremacy.insertColons": false, // 是否插入冒号"stylusSupremacy.insertSemicolons": false, // 是否插入分好"stylusSupremacy.insertBraces": false, // 是否插入大括号"stylusSupremacy.insertNewLineAroundImports": false, // import 之后是否换行"stylusSupremacy.insertNewLineAroundBlocks": false,"editor.suggestSelection":"first","vsintellicode.modify.editor.suggestSelection":"automaticallyOverrodeDefaultValue","editor.codeActionsOnSave": {"source.fixAll.eslint": true},
"eslint.alwaysShowStatus": true // 两个选择器中是否换行
}
7. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。