阅读 295

如何在代码中优雅地使用EsLint

一、准备工作

       首先需要我们赖以生存的开发工具-- vscode,这个编译器的优点就是可以自由地添加丰富的编译器插件,提升你的编码效率。

本次使用到的vscode插件: eslint 、Manta's Stylus Supremac(可选)

       开发环境当然得是node,全局安装eslint依赖包。

       .eslintrc.js文件,通过npm install -g eslint命令生成,当然也可以从网上找个现成的,前提是你能适应它里面的规则配置。


二、项目配置(自动根据eslint格式化当前保存的代码,一键修复)

由于开发中的一些操作习惯,我们的编码方式肯定不会完全符合eslint的规则,此时就需要用到一键修复。

首先打开vscode配置文件Seething.json 在其中加入以下配置:


/ 重新设定tabsize "editor.tabSize": 2, 

 // #每次保存的时候自动格式化 "editor.formatOnSave": true,

 // #每次保存的时候将代码按eslint格式进行修复

 // 添加 vue 支持 "eslint.options": 

{ "configFile": "你的.eslintrc.js文件路径" }, 

// #让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.validation.template": true, "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, "window.zoomLevel": 0, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }

 // 两个选择器中是否换行}

请注意,一定要配置对你本地的eslint文件路径

完成以上步骤后,重启编译器,尝试保存某个页面的代码,如果符合规范,那么恭喜你,设置完成,后面就可以愉快地敲代码了!


文章分类
前端
文章标签