摘要:一前言本文主要针对编辑器是的项目进行代码规范。因此对进行语法检查的工具应运而生,目前使用最为广泛。这篇将讲解如何将集成到我们的项目中。七总结在项目上使用实际上还算相对简单的,但是对于什么都是半生半熟的知识技能的人来说还是花了点时间。
一、前言
本文主要针对编辑器是sublime的vue项目进行eslint代码规范。
Javascript 是一门弱类型语言,所以语法检查变得尤为重要。虽然有很多前端IDE开发工具,可以很好地帮助我们提示在编写时的错误,但是大多数开发者还是使用的像 Sublime Text、Visual Studio Code 之类的轻量级编辑器,这导致在开发中很容易出现各种错误,比如单词拼写错误,漏掉了括号等。而且每个人的代码编写习惯也不一样,因此有的项目的代码格式千差万别,比如 缩进空格数,有的习惯4个,有的习惯2个,这也导致项目维护起来越来越麻烦,遇到错误也很难定位。因此对 Javascript 进行语法检查的工具应运而生,目前 ESLint 使用最为广泛。这篇将讲解如何将 ESLint 集成到我们的项目中。
二、实现过程1. **sublime text 3 的安装** 1.1 sublime text 3的安装,这个网上自行查找安装方法 1.2 sublime 相关eslint的插件安装,sublimelinter,sublimelinter-eslint 2. vue项目的创建 2.1 按照网上提供的方案安装,这里采用的是 “ vue init webpack ”的安装方式,这个会提示安装eslint即选择何种代码规范(这里选择airbnb-base) 3. **npm安装eslint相关插件** 3.1 vue-plugin-vue/html 3.2 vue-eslint-parser 3.3 babel-eslint 3.4 airbnb-base (代码规范) 4. **配置方案** 本文主要通过配置 ***“.eslintrc.js”*** 实现eslint的代码规范要求。 ESLint 具有高可配置行,这就意味着你可以根据项目需求定制代码检查规则。 ESLint 的配置方式可以有以下两种方式: --**文件注释:**在 Javascript 文件中使用注释包裹配置内容。 --**配置文件(推荐):**在项目根目录下创建包含检查规则的 .eslintrc.* 文件。三、sublime text 3 的安装
1. sublmie的安装 可以参考如下地址进行安装 https://blog.csdn.net/wxl1555/article/details/69941451 2. eslint的sublmie插件 sublimelinter,sublimelinter-eslint四、创建VUE项目
通过使用命令创建vue项目 :
`
vue init webpack // 初始化安装VUE项目 project name // 输入项目名称 project description // 输入项目说明 author // 输入作者 Vue build // 运行环境 Install vue-router Use ESLint to lint your code (Yes/No) //选择YES,安装eslint插件 (选择代码规范airbnb) Set up unit tests (Y/N) ....五、npm安装eslint相关插件
在项目目录下,通过使用npm命令安装eslint相关插件
airbnb-base (代码规范)
目前比较流行airbnb公司的代码规范,目前主要使用“air-base”,
安装依赖:
npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev
你也可以根据自己需要,到eslit-aribnb安装地址https://www.npmjs.com/package... 进行安装。
如果使用vue项目安装方式可以选择这个规范
babel-eslint
babel-eslint 解析器是对babel解析器的包装使其与ESLint解析
vue-eslint-parser
此解析器主要是针对vue文件的template的vue标签进行验证
eslint-plugin-vue
也是针对vue文件的内容进行验证,不能和 eslint-plugin-html放在配置文件中,否则至少放在此插件后面。
配置文件内容如下,可以根据自己的要求进行更改:
.eslintrc.js 文件配置内容
airbnb的规范虽然比较成熟了,但是每个人都有一些自己的需求,可以按需修改或增加一些规则
// https://eslint.org/docs/user-guide/configuring module.exports = { root: true, parser: "vue-eslint-parser", parserOptions: { "ecmaVersion": 6, "parser": "babel-eslint", "sourceType": "module", "allowImportExportEverywhere": false }, env: { browser: true, }, // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. extends: ["plugin:vue/strongly-recommended", "airbnb-base"], // required to lint *.vue files plugins: [ "vue", "vuefix", ], // check if imports actually resolve settings: { "import/resolver": { webpack: { config: "build/webpack.base.conf.js" } } }, // add your custom rules here rules: { // don"t require .vue extension when importing "import/extensions": ["error", "always", { js: "never", vue: "never" }], "linebreak-style": "off", "import/no-unresolved": 0, "import/no-dynamic-require": "off", "max-len": [0, 120, 2], "space-before-function-paren": ["error", { "anonymous": "never", "named": "always", "asyncArrow": "always" }], // disallow reassignment of function parameters // disallow parameter object manipulation except for specific exclusions "no-param-reassign": ["error", { props: true, ignorePropertyModificationsFor: [ "state", // for vuex state "acc", // for reduce accumulators "e" // for e.returnvalue ] }], // allow optionalDependencies "import/no-extraneous-dependencies": ["error", { optionalDependencies: ["test/unit/index.js"] }], // allow debugger during development "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", // 禁止使用 console 来调试程序,在运行 npm run myEslint 时,命令行不会输出 no-console 警告 "no-console": "off", }
}
package.json文件配置
在此文件的scripts中添加一行eslint验证执行命令
"scripts": { "myEslint": "eslint --ext .js,.vue src" },
当然你也可以全局安装以上依赖,这样你可以直接运行 eslint --ext .js,.vue src 命令。
Ok, 配置好了~
命令行运行 npm run myEslint
你会发现检查出一堆错误,不要方,输出的错误说明的非常明显,只需要根据错误提示行号去检查,然后 根据规则更改就行了。
上面的命令中 --ext 参数就是用来指定需要检查的扩展名的文件,src 就是指定检查的目录。
在vue项目上使用ESLint实际上还算相对简单的,但是对于什么都是半生半熟的知识技能的人来说还是花了点时间。
eslint无论是安装还是配置,实际上还算是比较人性化的。
想要成为一名优秀的程序员,规范化的代码风格格外重要,除了能降低代码出错率,还在代码的可读性上非常有帮助,另外代码注释对于代码的可读性也是必不可少的。
让eslint成为你编写代码的好帮手吧。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/95441.html
摘要:格式化安装插件如果题主认真读了的的话,应该可以写出下面的配置了。用来格式化和提示格式错误。在编码过程中提示格式错误,养成良好的编码习惯。 前言 感觉搭建一个舒服的前端开发环境,十分的重要定制化的格式化,编辑器自带的格式化各种报错,手动改真的会死人,因此搭建一个编辑器环境必不可少,现在要讲的是vscode中如何定制vue vs code的配置文件: showImg(https://seg...
摘要:它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。安装和使用在之后的实践过程中讲解。有一套良好的代码规范,对于项目的开发和维护都很友好。 努力了,不一定能成功,但是不努力,感觉好舒服啊 ——努训 没有了解过vue1.*,直接上手vue2.0;虽然有些吃力但还是很愉快了学下来了。 一丶环境配置 node.js...
摘要:它的目标是提供一个插件化的代码检测工具。,有了全局的和当前项目根目录下的规则配置文件,我们开始装插件并测试功能吧代码检查这个功能需要的插件为和。但是它本身并没有代码检查的功能,需要借助这样的特定语言检查支持。 前言 第一次运行 Vue 项目时被浏览器中满屏的 ESLint 报错给吓到了,果断禁用了该功能! 再之后找了个时间认真的了解了一下 ESLint,终于有了一些概念。简单来说,ES...
摘要:项目编码规范化工具工具代码校验工具,让代码更一致和避免。在配置文件到项可对单条规则一一进行改写。以下以项目需校验文件为例参考链接一步一步,统一项目中的编码规范 Web 项目编码规范化工具 工具 ESLint The pluggable linting utility for JavaScript and JSX 代码校验工具(linting utility),让代码更一致和避免 bug...
摘要:自动化接入和升级方案通过命令行工具提供一键接入升级能力,同时集成到团队脚手架中,大大降低了工程接入和维护的成本。原始代码经过解析器的解析,在管道中逐一经过所有规则的检查,最终检测出所有不符合规范的代码,并输出为报告。 引言 代码规范是软件开发领域经久不衰的话题,几乎所有工程师在开发过程中都会遇到,并或多或少会思考过这一问题。随着前端应用的大型化和复杂化,越来越多的前端工程师和团队开始重...
阅读 2290·2021-11-24 09:39
阅读 3758·2021-11-19 09:40
阅读 2130·2021-09-27 13:36
阅读 1873·2019-08-30 15:44
阅读 375·2019-08-30 13:52
阅读 2689·2019-08-30 11:13
阅读 2119·2019-08-29 16:18
阅读 1738·2019-08-29 15:43