vscode 使用eslint（保存自动格式化）

前提：在package.json中安装了eslint的依赖

1.在项目跟目录添加.eslintrc.js 文件

// https://cn.eslint.org/docs/rules/
//
/** "off"或者0，不启用这个规则* "warn"或者1，出现问题会有警告* "error"或者2，出现问题会报错*/module.exports = {root: true, //此项是用来告诉eslint找当前配置文件不能往父级查找env: { //环配置 如 "browser": true, node: true,node: true,},extends: ['plugin:vue/essential','@vue/airbnb',],rules: {'array-callback-return': 1, //return 后面是否允许省略"arrow-parens": ["error", "as-needed"], // 箭头函数的参数可以不使用圆括号'consistent-return': 0, //要求 return 语句要么总是指定返回的值，要么不指定'camelcase': 0, //强制驼峰法命名'eqeqeq': 0, //强制全等( === 和 !==)'func-names': 0, //函数表达式必须有名字"global-require": 0, // 取消对require的验证，使得可以使用require来加载图片的相对路径"import/no-unresolved": 0, // 取消自动解析路径，以此开启alias的别名路径设置'import/extensions': 0, // 取消对文件扩展名的验证'indent': 'off', //缩进风格(强制使用一致的缩进)"linebreak-style": 0, // 取消换行符\n或\r\n的验证()'max-len': 0, //字符串最大长度"no-unused-vars": 1, //禁止出现未使用过的变量"no-redeclare": 1, //禁止多次声明同一变量'no-use-before-define': 1, //禁止在变量定义之前使用它们"no-unused-expressions": 0, // 允许使用未使用过的表达式，以此来支持a && a()的代码形式'no-restricted-syntax': 1, //禁用特定的语法'no-plusplus': 1, //禁止使用++，--'no-underscore-dangle': 0, // 允许在标识符中使用下划线'no-param-reassign': 0, // 禁止对 function 的参数进行重新赋值'no-nested-ternary': 0, // 禁止嵌套三元表达式'no-else-return': 0, //禁止 if 语句中 return 语句之后有 else 块'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-shadow': [1, { //外部作用域中的变量不能与它所包含的作用域中的变量或参数同名"allow": ["resolve", "reject", "done", "cb"]}],'prefer-rest-params': 1, //要求使用剩余参数而不是 arguments'prefer-arrow-callback': 0, //要求回调函数使用箭头函数'prefer-const': 1, //首选const"semi": false, // 使用分号, 默认true"singleQuote": true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)"tabWidth": 4, // tab缩进大小,默认为4'template-curly-spacing': 'off', //要求或禁止模板字符串中的嵌入表达式周围空格的使用},parserOptions: {parser: 'babel-eslint',},
};

更多配置详见https://eslint.bootcss.com/docs/rules

2.在vscode中添加eslint和vetur插件

3.配置保存时按eslint规则自动格式化

编辑vscode配置文件

添加如下配置

  // 每次保存的时候自动格式化 旧版本配置//"editor.formatOnSave": true,// 每次保存的时候将代码按eslint格式进行修复//"eslint.autoFixOnSave": true,// 添加 vue 支持//"eslint.validate": ["javascript",//  "javascriptreact",//  {//   "language": "html",//    "autoFix": true//  },//  {//    "language": "vue",//    "autoFix": true//  }//]//新版本配置"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"eslint.format.enable": true,

注意：这里的配置你需要注意自己eslint版本

可以看下eslint的详细说明，有如图的配置说明，就使用新版本的配置

这样配置完成后保存文件时就会自动格式化了

vscode 使用eslint（保存自动格式化）相关推荐

VScode配置eslint保存自动格式化，eslint格式化去掉分号和双引号。vscode自动保存去掉分号和双引号；““
本文是开启eslint检验和配置eslint格式化:如果想要关闭eslint,查看这篇关闭eslint方法: 1.必须安装的三个插件eslint, prettier-Code formatter ,v ...
vsCode 设置vue 保存自动格式化代码
setting {// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsiz ...
eslint 保存自动格式化_代码规范之理解ESLint、Prettier、EditorConfig
授权转载自:nowThen https://juejin.cn/post/6895889063111294990 前言团队多人协同开发项目中困恼团队管理一个很大的问题是:无可避免地会出现每个开发者编 ...
eslint 保存自动格式化_ESLint一款可组装的JavaScript和JSX检查工具
使用vs code为例,创建项目ESLintDemo npm initnpm install --save-dev eslingeslint --init 项目的基本目录产生.eslintrc文件, ...
vs code保存自动格式化代码及eslint/tslint修复-太爽（丝滑般的感觉）
现在没有前后端分离的开发模式都不好意思跟同行交流.前后端分离的好处这里就不再赘述了. 本司开发的系统是基于Angular(ng zorro),TypeScript,后台采用Spring Boot.写前 ...
vscode中如何修改vetur配置_vscode 配置vue+vetur+eslint+prettier自动格式化功能
该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和 ...
关闭eslint检查2020_2020 vscode配置eslint保存后自动fix
2020 vscode配置eslint保存后自动fix 这篇文章发布于 2019/10/12,归类于计算机基础与开发工具标签: vscode 保存自动fix,vscode 保存执行fix,esli ...
vsCode的setting.json保存自动格式化代码html不换行
我的配置项如下: {"workbench.editor.enablePreview": false, //打开文件不覆盖"editor.minimap.enabled&q ...
vsCode 文件保存自动格式化设置
提示,公司各个的规范不一样,引进参考直接粘贴复制就行了. {// 文件保存自动格式化"editor.formatOnSave": true,// 格式化插件设置为 prettie ...

vscode 使用eslint（保存自动格式化）

vscode 使用eslint（保存自动格式化）相关推荐

最新文章

热门文章