eslint

本文讲解vue-cli脚手架根目录文件.eslintrc.js eslint简介 eslint是用来管理和检测js代码风格的工具，可以和编辑器搭配使用，如vscode的eslint插件 当有不符合配置文件内容的代码出现就会报错或者警告 安装eslint npm init -y npm install eslint --save-dev node_modules\.bin\eslint --init 初始化配置文件，此配置文件配置好之后，vscode编辑器自动识别 vue-cli的.eslintrc.js配置文件的解释 // http://eslint.org/docs/user-guide/configuring module.exports = { //此项是用来告诉eslint找当前配置文件不能往父级查找 root: true, //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析 parser: 'babel-eslint', //此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式 parserOptions: { sourceType: 'module' }, //此项指定环境的全局变量

介绍 最近开始刷一些书和题,此系列是介绍在读 Web最佳实践 的一些收获和体会。 web前端发展现状 存在问题： 代码组织混乱 代码格式的问题突出 页面布局随意 网站整体性能差，没有意识到应用诸如缓存，动态加载，脚本压缩，图片压缩等提高性能技术 推荐做法： 压缩样式表和脚本文件 减少HTTP请求次数 简洁和符合W3C标准的HTML和CSS代码能减少浏览器解析的时间，加快渲染过程 页面请求数量越少，相对页面的加载速度更快 在JS代码中选择性能更好的实现方案，如延迟加载，动态加载等技术; 延迟加载 <script type=”text/javascript” src=”" id=”my”></script> <script type=”text/javascript”> setTimeout(“document.getElementById(‘my').src='include/php100.php'; “,3000);//延时3秒 </script> 最后加载 引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行javascript的代码，所以可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度 动态加载 <scrīpt src='' id="s1"><

安装vue.js 安装步骤 安装node.js（若已安装nmp请忽略该步骤） 安装vue.js（这里使用的是在IDE下安装） 项目创建 安装步骤 安装node.js（若已安装nmp请忽略该步骤） 1.进入该网址：https://nodejs.org/en/ 2.下载安装node.js，这里我选择的是LTS版本，该版本为稳定版 3.下载完成后测试，结果如下 安装vue.js（这里使用的是在IDE下安装） 1.安装脚手架，在IDE 的 Terminal 窗口中输入 npm install -g vue-cli 结果如下 完成对vue.js的全局安装，以后便可以直接使用。 项目创建 1.进入到想要创建项目的目录下 2.输入： vue init webpack demo demo即为项目的名称，过程如下 其中： Install vue-router? (Y/n) # 是否安装Vue路由？ Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键） Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha ？ Setup e2e tests with

配置了Vue Eslint的自动保存，setting.json直接复制粘贴即可 { "editor.tabSize": 2, "files.associations": { "*.vue": "vue" }, "eslint.options": { "extensions": [ ".js", ".vue" ] }, "eslint.validate": [ "javascript", { "language": "vue", "autoFix": true }, "html", "vue" ], "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/dist": true }, "emmet.syntaxProfiles": { "javascript": "jsx", "vue": "html", "vue-html": "html" }, "git.confirmSync": false, "window.zoomLevel": 0, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.enabled": true, "editor.minimap

错误一： 当打开项目，输入npm run dev的时候，会出现这样的报错: 1 Errors: 2 4 http://eslint.org/docs/rules/no-tabs 3 4 http://eslint.org/docs/rules/indent 4 1 http://eslint.org/docs/rules/eol-last 5 1 http://eslint.org/docs/rules/semi 6 1 http://eslint.org/docs/rules/no-multiple-empty-lines 7 8 9 ✘ http://eslint.org/docs/rules/semi Extra semicolon 10 src\router\index.js:8:16 11 Vue.use(Router); 12 ^ 13 14 ✘ http://eslint.org/docs/rules/quotes Strings must use singlequote 15 src\router\index.js:13:13 16 path: "/", component: Main 17 ^ 18 19 20 ✘ 2 problems (2 errors, 0 warnings) 21 22 23 Errors: 24 1 http://eslint.org