Flycoding-xcode version of Emmet

⚠️ Use Swift 5 to compile ⚠️

FlyCoding is an Xcode plug-in written using the plugin mechanism provided by Apple that runs on the latest Xcode and provides functionality similar to Emmet in the front end. You can use special syntax to generate Swfit/Objective-C code as quickly as you want, especially when you’re writing a lot of UI, repetitive UI controls and constraints can be tedious and mechanical, but you can’t avoid it. FlyCoding will help you quickly generate attributes, methods, and restrictions (SnapKit for navigation). Currently, FlyCoding has just released its first version, and more functions are still being considered. We would appreciate your feedback and suggestions.

Current development progress:
  • Version 2.0 adds the powerful @do command to manipulate text through shell-like commands
    • Remove the command
    • To command
    • Copy command
    • Move command
    • The sort command
  • Objective-c/Swift attribute generation
  • Quick creation of Objective-C/Swift views
  • The navigation/SnapKit constraint is generated
  • System native AutoLayout constraint under Swift
  • Fast generation method
  • Any complete operation can be separated with ‘+’ and batch operation with ‘* N’

generateSnipkitLayout code examples

@ do command

@do move 10 34 to 44
// Move lines 10 through 34 to 44
//
// Commands are very simple to use, you can write commands from anywhere
// The command starts with @do, followed by the command you will operate on
// move is a move command, 10 is the start line, 34 is the end line
// To is also a command that moves content to the specified location
// To is not a combination of move commands. It is an independent command, which is described in the to command
// Next is the argument to the to command
Copy the code

In theory, unlimited number of commands can be connected. Each command is a unit of independent processing, and the state will be transmitted through a common context after processing. As more and more commands are generated, there will be more magical connections.

The delete command

  • remove/rm
    • @do rm 10 .
    • arg1 [arg2]
      • arg1Represents the starting number of rows
      • arg2Indicates the number of end rows. This parameter can be nullarg1Represents the row to delete
      • Besides being able to usedigitalIndicates the number of lines, but can also pass.To represent the command when going forward

Mobile command

  • move/mv
    • @do mv 10 . to 30
    • arg1 [arg2] * arg1Represents the starting number of rows *arg2Indicates the number of end rows. This parameter can be nullarg1Represents the row to be moved * except that it can be useddigitalIndicates the number of lines, but can also pass.To represent the command when going forward
    • to arg1 * toMoving to the specified position requires coordinationtoCommand *arg1Represents the row to be moved to

Copy command

  • copy/cp
    • @do cp 10 . to 30
    • arg1 [arg2] * arg1Represents the starting number of rows *arg2Indicates the number of end rows. This parameter can be nullarg1Represents the line to be copied * except that it can be useddigitalIndicates the number of lines, but can also pass.To represent the command when going forward
    • to arg1 * toMoving to the specified position requires coordinationtoCommand *arg1Represents the row to be moved to

Sort order

Arrange the code in the range from least to most, according to the length of each line

  • sort/st
    • `@do st 10 .
    • arg1 [arg2]
      • arg1Represents the starting number of rows, ifarg2A blank line ends the current line of the action command, while a start line subtracts the current line of the commandarg1 行
      • arg2Represents the number of end lines, whenarg1Closing line
      • arg2Besides being able to usedigitalIndicates the number of lines, but can also pass.To represent the command when going forward

Attributes to generate

Swift attribute generation

  • A single attribute
pv.UIImageView
// pv is for attribute control, p is for private, v is for var. . Used to distinguish between attributes and class names
private var <#name#>: UIImageView

Pv.Int/age
// Pv: public var
// '/age' where '/' is used to mark the attribute name
public var age: Int
Copy the code
  • Optional attribute
fv.UILabel?
// fv is for attribute control, f is for fileprivate, v is for var; ? Indicates that the property is optional
fileprivate var <#name#>: UILabel?
Copy the code
  • Properties with default values
Pl.UIView{}
// Pl is for attribute control, P is for public, l is for let; {} indicates that there are default values
// Default values are generated using Class()
// If there is a default value, the type is no longer displayed because Swift can infer the type itself
public let <#name#> = UIView(a)Pl.Int{100}
// If you add a default value to {}, the default value will be used directly
public let <#name#> = 100
Copy the code
  • Lazy loading property
lv.UIButton
// Lv is the attribute control, lv is a special combination, l represents let, v represents var; When combined, represents a lazy var
lazy var <#name#>: UIButton = {
    <#code#>
}()
Copy the code
  • OC has access to properties
@Pv.UIImageView
// Adding @ marks the attribute as @objc
@objc public var <#name#>: UIImageView
Copy the code
  • Special attribute identification
 wv.EatProtocol?
// Adding w marks the attribute as weak. In addition to w, there are u/unowned, c/class, and s/static
weak var <#name#>: EatProtocol?
Copy the code
  • Batch generation properties
pl.UILabel{} *2
// *2 can not be separated by a space. It is usually used when writing data models or UI
private let <#name#> = UILabel(a)private let <#name#> = UILabel(a)Copy the code
  • Generates block initialization values
plb.UIButton
// The b flag stands for block
private let <#name#>: UIButton = {
    <#code#>
}()
Copy the code

Tips: If the attribute has no written tag, let is automatically used to tag the attribute

.UIImageView 

 let <#name#>: UIImageView
Copy the code

Swift attribute tag quick lookup table

symbol tag
l Let
v var
lv lazy var
p private
P public
o open
f fileprivate
pl private let
pv private var
plv private lazy var
Pl public let
Pv public var
Plv public lazy var
ol open let
ov open var
olv open lazy var
fl fileprivate let
fv fileprivate var
flv fileprivate lazy var
— —
@ @objc
u unowned
w weak
c class
s static
Special symbols function
b Block, which generates a block initialization value for the property, similar to lazy var
F For your own use, the initial value of the attribute is provided by the config function

Objective-c attribute generation

The usage syntax in Objective-C is not that different from Swift, except that the keywords and generation look different

  • A single attribute
.UIImageView *
// The default description is nonatomic, strong
@property (nonatomic, strong) UIImageView *<#name#>
Copy the code
  • Generate full properties
c.NSString *name;
// If '; 'indicates that the Class is preceded by the attribute name for quick coding
@property (nonatomic, copy) NSString *name;
Copy the code

Tips: Class can be used to mark class attributes

Objective-c attributes tag quick query tables

symbol tag
s strong
w weak
a assign
r readonly
g getter=<#getterName#>
c copy
n nullable
N nonnull
c class

Generate constraint code

I selected the two most commonly used frameworks to implement it. I would like to use navigation in Objective-C and SnapKit in Swift.

SnapKit

  • Add the layout
 #snpm(iconView, e=self)
 SNPM is used in aints () to separate statements
 // The first argument is the object to which the constraint is to be added, and the rest are layout statements
 // Each statement is divided into three parts. On the left is the property of the object to be constrained, and in the middle is the constraint method.
 // The right-hand side is the value of the constraint or other constraint objects
 iconView.snp.makeConstraints {
    $0.edges.equalTo(self)}Copy the code
  • Update the layout
#snpu(iconView, h=100)
/ / snpu updateConstraints
iconView.snp.updateConstraints {
    $0.height.equalTo(100)}Copy the code
  • Reset the layout
#snprm(iconView, r=self - 20)
/ / SNPRM remakeConstraints
iconView.snp.remakeConstraints {
    $0.right.equalTo(self).offset(-20)}Copy the code
  • Layout Demo 1 (Relative Distance)
#snpm(iconView, r=titleLabel.l-20, wh=20)
// More intuitive use of + - to set the relative distance
iconView.snp.makeConstraints {
    $0.right.equalTo(titleLabel.snp.left).offset(-20)
    $0.width.height.equalTo(20)}Copy the code
  • Layout Demo 2 (+-)
#snpm(iconView, t=titleLabel.b-superView.height-20, wh=100)
// In a constraint statement, the first plus or minus sign has a positive or negative meaning
 iconView.snp.makeConstraints {
    $0.top.equalTo(titleLabel.snp.bottom).offset(-superView.height-20)
    $0.width.height.equalTo(100)}Copy the code
  • Layout Demo 3 (Proportional Constraints)
#snpm(iconView, wh=self/2)
// Proportional constraints are also commonly used
iconView.snp.makeConstraints {
    $0.width.height.equalTo(self).dividedBy(2)}// Same function
#snpm(iconView, wh=self*0.5)
// The * method is also available
iconView.snp.makeConstraints {
    $0.width.height.equalTo(self).multipliedBy(0.5)}Copy the code
  • Layout Demo 4 (Comparison)
#snpm(titleLabel, tl=self, r<=self - 20)
// The width is adjusted according to the length of the text
// You can also use >= to indicate greater than or equal to
 titleLabel.snp.makeConstraints {
    $0.top.left.equalTo(self)
    $0.right.lessThanOrEqualTo(self).offset(-20)}Copy the code
  • Layout Demo 4 (Constraint Level)
#snpm(iconView, l = self, r <= superView~20, r <= titleLabel.l - 20~h)
// Use ~ at the end of the constraint statement to set the constraint registry
// You can use numbers to indicate the constraint register, or you can use r\h\m\l to indicate the constraint register
 iconView.snp.makeConstraints {
    $0.left.equalTo(self)
    $0.right.lessThanOrEqualTo(superView).priority(20)
    $0.right.lessThanOrEqualTo(titleLabel.snp.left).offset(-20).priority(.high)
}
Copy the code

SnapKit attribute tag quick query table

  • attribute
symbol attribute
l left
t top
b bottom
r right
w width
h height
x centerX
y centerY
c center
s size
e edges
— The constraint level
r .required
h .high
m .medium
l .low
— Comparison of parameters
> = greaterThanOrEqualTo
< = lessThanOrEqualTo
= equalTo
— Sign of operation
– Offset(-value)
+ Offset(value)
* multipliedBy(value)
/ dividedBy(value)

Masonry

The main usage is the same as SnapKit, the main differences are described below

  • Create, update, reset
@masm(iconView, e=self)   / / create
@masu(iconView, e=self)    / / update
@masrm(iconView, e=self)  / / reset
Copy the code

In OC, you can prefix the command with @, mainly because # will automatically change the first column in the OC file, affecting the structure of the code

  • There is no level R in the constraint
  • == / >== / <== = is added to the comparison
@masm(iconView, e=self)   / / create
@masu(iconView, e=self)    / / update
@masrm(iconView, e=self)  / / reset
Copy the code

AutoLayout(Swift)

The main usage of SnapKit/ navigation is the same as that of SnapKit/ navigation

  • Use #layout to execute the statement
  • Support for S (size)/C (Center)/E (edges) has been removed. It will be added back in a future update
  • Operations that remove division from constraints are no longer available/
  • The offset control is not simply used+ ` ` -If you want to set constant constraints or offsets: 100In the form of
@layout(view, l=self:100, t=self: -20, w=self*2, h=:50)
Copy the code

Quick creation of views

This can be done with blocks of code using Xcode, but when writing code, having to look at the phrase and wait for Xcode to react to it can be frustrating. We are for fast!! And we can just give the view a variable name, and the code block still doesn’t

With the #make command we can quickly add the code to create a View

This is the type of creation currently supported

  • UIView

  • UILabel

  • UIButton

  • UIImageView

  • UITableView

  • UICollectionView

  • Normally create UIImageView

#make(UIImageView)
// Generate Swift view
let <#name#>  = UIImageView()
<#name#>.backgroundColor = <#color#>
<#name#>.image = <#image#>
<#superView#>.addSubview(<#name#>)
// Generate an OC view
UIImageView *<#name#> = [[UIImageView alloc] init];
self.<#name#> = <#name#>;
<#name#>.backgroundColor = <#color#>;
<#name#>.image = <#image#>;
[<#superView#> addSubview: <#name#>];
Copy the code
  • Set the property name to create a UILabel
@make(UILabel, titleLabel)
// Generate Swift view
let titleLabel = UILabel()
titleLabel.font = <#font#>
titleLabel.textColor = <#color#>
titleLabel.text = <#text#>
titleLabel.backgroundColor = <#color#>
<#superView#>.addSubview(titleLabel)
// Generate an OC view
UILabel *titleLabel = [[UILabel alloc] init];
self.titleLabel = titleLabel;
titleLabel.font = <#font#>;
titleLabel.textColor = <#color#>;
titleLabel.text = <#text#>;
titleLabel.backgroundColor = <#color#>;
[<#superView#> addSubview:titleLabel];
Copy the code

Create method

Swift

  • Create method

#func can be abbreviated using #f

#func(eat)
// Generate a simple method
func eat(a) {
    <#code#>
}
Copy the code
  • Method of setting permissions
#func(@p.run)
// Tags are the same as attributes
@objc private func run(a) {
    <#code#>
}
Copy the code
  • Methods with arguments
#func(run::)
// one: indicates that there is one parameter
func run(<#name#>: <#type#>, <#name#>: <#type#>) {
    <#code#>
}
Copy the code
  • A method that returns a value
#func(run>)
// A > represents a return value
func run(a)- > < #return#> {
    <#code#>
}
// Multiple return values will return tuples
#func(run>>)
func run(a)- > (< #return# >, < #return#>) {
    <#code#>
}
Copy the code

Objective-C

  • Create method
#func(run)
// Generate a simple method
- (void)run {
    <#code#>
}
Copy the code
  • A method that returns a value
#func(run>)
// A > represents a return value
- (<#type#>)run {
    <#code#>
}
Copy the code
  • Methods with arguments
#func(run::)
// one: indicates that there is one parameter
- (void)run:(<#type#>)<#param0#> <#name1#>:(<#type#>)<#param1#> {
    <#code#>
}
Copy the code

General syntax function

  • Batch processing: All of the above commands can be generated in batches by following *n
  • Multiple command execution: you can generate multiple sentences of commands by + writing consecutively

We look forward to your valuable comments and suggestions. You can make an issue or send email to [email protected]

#End