文档章节

关于vue-eslint自动补全代码,以及自动生成雪碧图

o
 osc_1ee7cxmx
发布于 2018/08/06 19:40
字数 488
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

一、配置eslint

module.exports={
"printWidth": 240, //一行的字符数,如果超过会进行换行,默认为80
"tabWidth": 2, //一个tab代表几个空格数,默认为80
"useTabs": false, //是否使用tab进行缩进,默认为false,表示用空格进行缩减
"singleQuote": true, //字符串是否使用单引号,默认为false,使用双引号
"semi": true, //行位是否使用分号,默认为true
"trailingComma": "none", //是否使用尾逗号,有三个可选值"<none|es5|all>"
"bracketSpacing": true, //对象大括号直接是否有空格,默认为true,效果:{ foo: bar }
"parser": "vue" //代码的解析引擎,默认为babylon,与babel相同。
};

// https://eslint.org/docs/user-guide/configuring

module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard',
// 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.
'plugin:vue/essential',
'plugin:prettier/recommended',
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
"prettier/prettier": "off",
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"quotes": ["error", "single"]
}
}
在package.json加入相关
"babel-eslint": "^8.2.6",
"eslint-config-prettier": "^2.9.0",

const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
fix: true,
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
});


二、配置雪碧图
在package.json加入相关
"webpack-spritesmith": "^0.4.1"
const templateFunction = function (data) {
// console.log(data.sprites);
if(data.sprites.length>0){
const shared = '.s-icon { background-image: url(I); }'
.replace('I', data.sprites[0].image)
// 注意:此处默认图标使用的是二倍图
const perSprite = data.sprites.map(function (sprite) {
return '.s-icon-N {display: inline-block;width: SWpx; height: SHpx; }\n.s-icon-N .s-icon, .s-icon-N.s-icon { width: Wpx; height: Hpx; background-position: Xpx Ypx; } '
.replace(/N/g, sprite.name)
.replace(/SW/g, sprite.width / 2)
.replace(/SH/g, sprite.height / 2)
.replace(/W/g, sprite.width)
.replace(/H/g, sprite.height)
.replace(/X/g, sprite.offset_x)
.replace(/Y/g, sprite.offset_y)
}).join('\n');

return shared + '\n' + perSprite
}

};

plugins: [
// 雪碧图相关
new SpritesPlugin({
// 目标小图标
src: {
cwd: path.resolve(__dirname, '../src/assets/images/icons'),
glob: '*.png'
},
// 输出雪碧图文件及样式文件
target: {
image: path.resolve(__dirname, '../src/assets/css/sprite.png'),
css: [[path.resolve(__dirname, '../src/assets/css/sprite.css'), {
format: 'function_based_template'
}]]
},
customTemplates: {
function_based_template: templateFunction
},
// 样式文件中调用雪碧图地址写法
apiOptions: {
cssImageRef: process.env.NODE_ENV === 'production'? '~@/assets/css/sprite.png?v=' + Date.parse(new Date()):'~@/assets/css/sprite.png'
},
spritesmithOptions: {
algorithm: 'binary-tree',
padding: 4
}
})
],

 

 

 

const SpritesPlugin = require('webpack-spritesmith');

 

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

SnailSVN Pro for mac(SVN客户端) v1.9.9

macw为您带来SnailSVN Pro for mac ,SnailSVN Mac版是一款类似于 TortoiseSVN 的 Apache Subversion(SVN)客户端,与 Finder 紧密集成。SnailSVN Mac版允许你从 Finder 的上下文菜单中快速...

单手绕月
21分钟前
7
0
python网络编程(进程与多线程)

multiprocessing模块   由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程。   multiprocessing包是Pytho...

osc_ky74f26k
21分钟前
5
0
CentOS7 redis5.0高可用部署

概述 Redis Sentinel为Redis提供高可用性。Redis Sentinel是一个分布式系统,Sentinel本身设计为在有多个Sentinel进程协同合作的配置中运行。具有多个Sentinel进程进行协作的优点如下: 1、当...

紅顏為君笑
21分钟前
6
0
Ocelot简易教程(四)之请求聚合以及服务发现

上篇文章给大家讲解了Ocelot的一些特性并对路由进行了详细的介绍,今天呢就大家一起来学习下Ocelot的请求聚合以及服务发现功能。希望能对大家有所帮助。 作者:依乐祝 原文地址:https://www...

osc_zo0djpuu
22分钟前
8
0
leetcode63(不同路径 II)--Java语言实现

求: 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为“Finish”)。 现在...

拓拔北海
23分钟前
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部