在VSCode中配置代码自动 eslint 格式化(修改eslint规则eslint忽略文件)

Posted 努力的小朱同学

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在VSCode中配置代码自动 eslint 格式化(修改eslint规则eslint忽略文件)相关的知识,希望对你有一定的参考价值。

一、Eslint

Eslint 是用来检测和规范代码格式的工具,应用在工程化项目中,可以保证项目代码格式的一致性和规范性,大大提升了代码的可读性。

二、配置过程

本博客是讲述对一个已经引用 eslint 依赖Nuxt项目(vue项目应该相同),在使用VScode进行开发时,如何配置VScode在保存时,自动 eslint 格式化,并修改部分 eslint 规则,使其不与自动格式化的规则相冲突。这样可以大大提升我们的开发效率,并且如果对某些外部复制(抄)过来的代码,也可通过自动格式化,来使其符合 eslint 的格式。

1、安装插件

在 VSCode 的插件市场中安装以下四个插件:

① Eslint

② Vetur

该插件是用来实现Vue语法高亮的。

③ Prettier - Code formatter

④ Manta’s Stylus Supremacy

格式化CSS

2、修改 VScode 配置文件,使保存时,自动进行eslint格式化

点击VSCode页面左下角的设置按钮,选择设置,选择扩展中的Eslint选项,并找到 在 settings.json 中编辑选项。

然后在该 配置文件中输入以下代码:


  "workbench.colorTheme": "Default Dark+",
  "editor.tabSize": 2,
  "editor.fontSize": 14,
  "[vue]": 
    "editor.defaultFormatter": "octref.vetur"
  ,
  "security.workspace.trust.untrustedFiles": "open",
  "editor.codeActionsOnSave": 

    "source.fixAll.eslint": true
  ,
  "editor.detectIndentation": false,
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    
      "language": "vue",
      "autoFix": true
    
  ],
  "prettier.eslintIntegration": true,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": 
    "js-beautify-html": 
      "wrap_attributes": "force-aligned"
    
  ,
  "stylusSupremacy.insertColons": false,
  "stylusSupremacy.insertSemicolons": false,
  "stylusSupremacy.insertBraces": false,
  "stylusSupremacy.insertNewLineAroundImports": false,
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  "editor.language.brackets": [
  
  ],
  "eslint.nodeEnv": ""


3、 修改eslint格式规则

在上面配置完成后,VSCode已经可以在保存时自动格式化了,但此时有两条格式化规则与eslint的规则相冲突,所以需要进行配置,在项目根目录的.eslintrc.js文件内,配置的是eslint的相关设置:

// 项目不同配置项可能不同,主要看rules项即可
module.exports = 
  root: true,
  env: 
    browser: true,
    node: true
  ,
  parserOptions: 
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  ,
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended'
  ],
  plugins: [
  ],
  // add your custom rules here
  rules: 
    // 修改标签属性的 eslint 规则 允许标签属性换行
    'vue/first-attribute-linebreak': ['error', 
      singleline: 'ignore',
      multiline: 'ignore'
    ],
    // 修改 右标签 > 的 eslint 规则  无需单独一行
    'vue/html-closing-bracket-newline': 0
  


Eslint的rules规则:
'规则名': [错误级别, '错误处理方式']
错误级别分为三种:
① “off” or 0 - 关闭规则

② “warn” or 1 - 将规则视为一个警告

③ “error” or 2 - 将规则视为一个错误

// 例如
 rules: 
     'semi': [2, 'never'],  // 不使用分号,否则报错
     'quotes': [2, 'single'] // 使用单引号,否则报错
 

4、设置 eslint 忽略某些文件,不进行格式化

在项目根目录下 新建 .eslintignore 文件,以文件相对路径的形式表示项目中那些文件应该被忽略,一般用于忽略某些引入的外部组件。以 # 开头的行会被当作注释,路径是相对于 .eslintignore 的位置或当前工作目录,以 ! 开头的行是否定模式,它将会重新包含一个之前被忽略的模式。
除了 .eslintignore 文件中的设置的被忽略文件,ESLint还会自动忽略 node_modules和 bower_components中的文件。
当 ESLint 运行时,在确定哪些文件要检测之前,它会在当前工作目录中查找一个 .eslintignore 文件。如果发现了这个文件,当遍历目录时,将会应用这些偏好设置。一次只有一个 .eslintignore 文件会被使用,所以,不是当前工作目录下的 .eslintignore 文件将不会被用到。

# eslint 忽略的文件夹 或某个单独文件
# components/pagination/*
assets/css/icon/*
# 把被忽略的文件夹中的某个文件拿出来,使其不再被忽略
!assets/css/icon/icon.css
# 忽略所有js文件
# **/*.js
 

vscode设置eslint自动保存代码格式化配置

在vscode的setting.json里面增加以下配置
eslint就会自动fix了

"eslint.enable": true,
"eslint.validate": ["vue"],
 "editor.codeActionsOnSave": 
     "source.fixAll.eslint": true
 

但是上面的会比较慢,如果我们只是简单的格式化,可以采用下面这种配置

"editor.formatOnType": true,
"editor.formatOnSave": true

这种只是格式上的,比如锁进什么的,不涉及到修改代码,比较快

以上是关于在VSCode中配置代码自动 eslint 格式化(修改eslint规则eslint忽略文件)的主要内容,如果未能解决你的问题,请参考以下文章

vscode设置eslint自动保存代码格式化配置

新版vscode配置eslint自动格式化代码

vscode+eslint自动格式化vue代码的方法

vscode+eslint自动格式化vue代码的方法

配置vscode保存后自动按eslint配置格式化

配置vscode保存后自动按eslint配置格式化