vscode 配置 eslint 自动格式化

1、安装插件 eslint

2、文件=》首选项=》设置 setting.json

"eslint.autoFixOnSave": true,
"eslint.options": {
    "extensions": [
        ".js",
        ".vue"
    ]
},
"eslint.validate": [
    "javascript",{
        "language": "vue",
        "autoFix": true
    },"html",
    "vue"
],

 

vue eslint 和vscode 配置eslint 自动保存 缩进冲突

项目根目录 新建文件 .editorconfig

配置

# See http://EditorConfig.org

root = true

[*]
indent_style = space
indent_size = 4
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

vscode 配置(all)

{
  "window.zoomLevel": 0,
  // 编辑器字体加粗   
  "editor.fontWeight": "400",
  // 字体风格
  "editor.fontFamily": "'Menlo','Monaco','Courier New','monospace'",
  // 主题
  "workbench.colorTheme": "Atom One Dark",
  // 导航栏在左   
  "workbench.sideBar.location": "left",
  // 字体大小
  "editor.fontSize": 15,
  "git.ignoreLegacyWarning": true,
  "editor.detectIndentation": false,
  "editor.tabSize": 4,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
   },
   "eslint.validate": [
        "javascript",{
            "language": "vue",
            "autoFix": true
        },"html",
        "vue"
   ],
}

 

转载于:https://www.cnblogs.com/CaktyRiven/p/11187772.html

### 回答1: 要使用VSCode配合ESLint自动修复格式化Vue3或React代码,需要按照以下步骤操作: 1. 在VSCode中安装ESLint插件和Prettier插件。 2. 在项目根目录下安装ESLint和Prettier依赖包。 3. 在项目根目录下创建.eslintrc.js文件,并配置ESLint规则。 4. 在VSCode的设置中,将"editor.formatOnSave"设置为true,以便在保存文件时自动格式化代码。 5. 在VSCode的设置中,将"eslint.validate"设置为"onSave",以便在保存文件时自动运行ESLint检查。 6. 在VSCode的命令面板中,选择"ESLint: Fix all auto-fixable Problems",以自动修复ESLint检查出的问题。 7. 在VSCode的命令面板中,选择"Prettier: Format Document",以自动格式化代码。 通过以上步骤,就可以使用VSCode配合ESLint自动修复格式化Vue3或React代码了。 ### 回答2: VSCode 是一款功能强大的现代化代码编辑器,它支持多种语言和框架,如 Vue3 和 React。同时,它也支持集成 ESLint 插件,以帮助我们检测并自动修复代码规范和格式问题。在该环境中配合 ESLint 自动修复格式化非常简单,下面将为大家介绍具体操作步骤。 首先,我们需要在 VSCode 中搜索并安装 ESLint 插件。安装完毕后,我们可在左侧的“Extensions”面板中看到它。 接着,在项目的根目录下初始化一个新的 eslint 配置文件,运行以下命令: ``` npm install eslint --save-dev ./node_modules/.bin/eslint --init ``` 其中eslint --init命令将会进入eslint配置向导并根据你的需求自动生成.eslintrc.* 配置文件, 这里的 `—save-dev` 参数意味着将 eslint 安装为开发依赖。同时,我们还需要使用npm/yarn 以安装eslint插件的规则依赖,这里以使用 airbnb 的规则为例: ``` npx install-peerdeps --dev eslint-config-airbnb-base ``` 然后,我们需要在 VSCode 首选项中启用 ESLint 插件,并选择自动保存文件时执行 ESLint 格式化功能。为了实现这个目标,我们需要按照以下步骤: - 打开 VSCode 首选项(Preferences)并搜索“eslint”。 - 在搜索结果中选择“ESLint > Auto Fix On Save”选项并将其勾选上。 image 这样,当我们编写 Vue3 或 React 代码时,ESLint自动纠正一些常见的语法和格式问题。一些错误内容比如缩进、括号空格等都会自动得到修复和统一。如果确实存在无法自行修复的问题,我们仍然可以在编辑器中看到它们。在这种情况下,我们需要自行解决问题或查看 ESLint 文档以了解如何解决错误。 综上所述,通过使用 ESLint 工具和 VSCode 编辑器的自动保存功能,我们可以更轻松地维护我们的代码质量和统一性。它可以帮助我们避免格式错误和其他常见的代码问题,确保我们的代码遵循最佳实践,并更加易于阅读和维护。 ### 回答3: VS Code 是一款非常流行的代码编辑器,支持很多功能强大的扩展插件,其中一个非常实用的插件就是 ESLint 自动修复格式化插件。对于 Vue.js 3 或 React 项目的开发者来说,这个插件是非常有用的。 首先,我们要安装 VS Code 上的 ESLint 插件,然后在项目中使用 npm 或 yarn 安装 ESLint: ``` npm install eslint --save-dev ``` 或 ``` yarn add eslint --dev ``` 然后,我们可以在项目根目录下创建一个 `.eslintrc.js` 配置文件,来配置 ESLint 的规则和插件。在 Vue.js 3 项目中,我们可以使用 `@vue/eslint-config` 来设置规则,而在 React 项目中,我们可以使用 `eslint-config-react-app`。配置文件大概长成这样: ``` module.exports = { root: true, env: { browser: true, node: true, es2021: true, }, extends: [ 'plugin:vue/vue3-recommended', 'eslint:recommended', ], parserOptions: { ecmaVersion: 12, sourceType: 'module', }, plugins: [ 'vue', ], rules: { // add your custom rules here }, } ``` 我们可以根据项目需要,自定义 ESLint 的规则和插件。配置好了之后,我们就可以在 VS Code 中使用 ESLint 插件了。 在 VS Code 中打开 Vue.js 3 或 React 项目后,我们可以看到编辑器左下角会出现一个 ESLint 的标志,这表示 VS Code 已经启用了 ESLint 插件。当我们写代码时,如果发现代码出现了 ESLint 的错误或警告,我们只需要将鼠标悬停在出错的地方,就可以看到具体的提示信息。 此时,我们可以使用 VS Code 的快捷键 `Ctrl + .` 或 `Cmd + .`来打开 Quick Fix 菜单,然后选择 "Fix this" 或 "Fix all" 选项,来让 VS Code 自动修复代码中的 ESLint 错误和警告。这个操作非常方便,可以帮助我们快速修复代码中的问题并保持代码风格一致。 总的来说,VS Code 配合 ESLint 自动修复格式化的功能能够大大提高开发效率,降低出错几率,值得我们掌握和使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值