vue.js - 使用 VSCode 的 vue 文件中的手写笔样式格式
问题描述
我有一个如下组成的 vue 文件(不是很重要):
<template>
//some pseudo-html
</template>
<script>
//some javascript
</script>
<style lang='stylus'>
@import '~variables'
.card
cursor pointer
//some more stylus
</style>
我已经formatOnSave
在 VSCode 中激活,我还安装了 vetur 和 esLint。
当我在经典标签中使用 CSS 代码<style>
时,我没有问题,但是当我使用时lang='stylus'
,ESLint 仍在寻找 CSS(我收到类似的语法错误[css] { expected (css-lcurlyexpected)
)。
此外,当我使用手写笔时,保存时的自动格式只会把一切都搞砸,它将所有内容放在同一行。保存后的结果:
<style lang='stylus'>
@import '~variables'
.card cursor pointer position relative padding //some more stylus
</style>
我试图更改 vscode 中的 followinf 设置:
vetur.format.defaultFormatter.css
vetur.format.defaultFormatter.stylus
但无济于事。
我目前的设置:
{
"workbench.colorTheme": "FlatUI Immersed",
"workbench.iconTheme": "material-icon-theme",
"files.trimTrailingWhitespace": true,
"editor.insertSpaces": true,
"editor.formatOnSave": true,
"editor.detectIndentation": false,
"editor.formatOnPaste": false,
"editor.formatOnType": true,
"editor.renderControlCharacters": true,
"editor.renderWhitespace": "all",
"editor.minimap.enabled": false,
"editor.mouseWheelScrollSensitivity": 2,
"editor.tabSize": 4,
"editor.fontSize": 15,
"window.zoomLevel": -1,
"workbench.startupEditor": "newUntitledFile",
"markdown.extension.preview.autoShowPreviewToSide": true,
"markdown.preview.breaks": true,
}
和工作区特定设置:
"settings": {
"files.associations": {
"*.vue": "html"
},
"editor.tabSize": 2,
"editor.formatOnSave": true,
// Defines space handling before function argument parentheses. Requires TypeScript >= 2.1.5.
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
// Defines space handling before function argument parentheses. Requires TypeScript >= 2.1.5.
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// Eslint options
"eslint.enable": true,
"eslint.options": {
"extensions": [
".html",
".js",
".vue",
".jsx"
]
},
// An array of language ids which should be validated by ESLint
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
}
],
// Run the linter on save (onSave) or on type (onType)
"eslint.run": "onSave",
// Turns auto fix on save on or off.
"eslint.autoFixOnSave": true,
}
如果有人知道如何让格式化程序和 linter 正确地考虑到这一点,那将是非常棒的,但是经过 2 小时的挖掘,我真的会找到一种方法来禁用格式化程序和 linter 只是为了<style>
标签。
解决方案
所以,在挖掘了更多之后,我找到了一个解决方案:
删除这部分设置:
"files.associations": {
"*.vue": "html"
},
并在这部分替换html
为:vue
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
并添加:
"vetur.format.defaultFormatter.js": "none"
推荐阅读
- ios - 如何使用 CloudKit 通过 CKQueryOperation 进行迭代查询,直到光标为零?
- reactjs - React/Redux:为什么没有在 ComponentDidMount() 中调用我的操作?
- r - facet_grid ggplot2中每个方面的scale_x_date
- javascript - 状态未初始化为初始状态
- javascript - 将数组中的数据发布到谷歌电子表格
- java - 如何使用 JFileChooser 保存 XLS 文件?
- php - 如何将字符串和int比较为int?
- mysql - 从给定日期中提取年份?
- ansible - 是否可以使用 Ansible playbook 遍历节点机器上的多个文件并搜索 n 替换特定行
- javascript - 为什么在 javascript 中使用 if(!!obj){} 而不是 if(obj){}